Hi,
I like to integrate the paint Web plugin. I try to start a module, but I have some questions how to integrate this in a drupal module. This is the clean config data for paint Web:

tinyMCE.init({
mode: "textareas",
theme : "advanced",
// Include the PaintWeb plugin. Put 'paintweb' after
// the 'contextmenu' plugin if you want context menu
// integration as well.
plugins : "contextmenu,paintweb", // ...

// The PaintWeb configuration object.
paintweb_config : {
configFile: "config-example.json",
// TinyMCE plugin options.
tinymce: {
// Tell where PaintWeb is located.
paintwebFolder: "paintweb/build/",
imageDataURLfilter: "/path/to/some.php",
imageSaveDataURL: true,
overlayButton: true,
contextMenuItem: true,
dblclickHandler: true,
pluginBar: true,
syncViewportSize: true
}
},

// Theme options
theme_advanced_buttons1 : "save,newdocument,|,...",

// The 'paintwebEdit' button.
theme_advanced_buttons2 : "cut,copy,paste,...,image,paintwebEdit,...",

// ...
});

I started the module with this:


<?php /* $Id: paintweb.module,v 1.0 2008/01/07 19:03:00 RAV $ */

/**
* Implementation of hook_wywiwyg_plugin().
*/
function paintweb_wysiwyg_plugin($editor, $version) {
$plugins = array();
switch ($editor) {
case 'tinymce':
if ($version > 3) {
$plugins['paintweb'] = array(
'type' => 'external', // intern or extern??
'title' => t('paint Web'),
'description' => t('PaintWeb is a Web application which allows users to draw inside the Web browser.'),
'extensions' => array('paintweb' => t('paint Web')),
'path' => drupal_get_path('module', 'paintweb') .'/plugins/editor_plugin.js',

// What about the buttons, how to register them correctly?

'buttons' => array(
'toolbarButton' => t('Edit the selected image in PaintWeb. If no image is selected, then you can create a new drawing.')),

'extensions' => array(
'overlayButton' => t('Edit'),
'contextMenuEdit' => t('Edit the image in PaintWeb'),
'overlayLoading' => t('PaintWeb is loading...'),
'statusImageEditing' => t('You are editing an image from TinyMCE.'),
'statusSavingImage' => t('Saving image changes...'),
'statusImageSaved' => t('Image save completed successfully!'),
'statusImageSaveFailed' => t('Image save failed!'),
'imageSaveButton' => t('Save'),
'imageSaveButtonTitle' => t('Save the image and return to TinyMCE.'),
'cancelButton' => t('Cancel'),
'cancelButtonTitle' => t('Cancel image edits and return to TinyMCE.'),
'submitUnsaved' => t('The image is not saved! You cannot submit the form. Please save the image changes, or cancel image editing, then try again.')),
// Is this the right place - 'options'?
'options' => array(
'paintwebFolder' => drupal_get_path('module', 'paintweb'),
'imageDataURLfilter' => "/path/to/some.php",
'imageSaveDataURL' => true,
'overlayButton' => true,
'contextMenuItem' => true,
'dblclickHandler' => true,
'pluginBar' => true,
'syncViewportSize' => true
),
'internal' => FALSE, // Is this right?
'url' => 'http://paintweb.googlecode.com/svn/trunk',
'load' => TRUE,
);

}
break;
}
return $plugins;
}

What do you think? This is quite not working, because I was not sure how to manage the buttons(theme_advanced_buttons1 etc.) an some other things. Is someone able to give me a hint how to keep this on working?

Cheers

Comments

TwoD’s picture

Status:Active» Fixed

Try this:

<?php
/**
* Implementation of hook_wywiwyg_plugin().
*/
function paintweb_wysiwyg_plugin($editor, $version) {
 
$plugins = array();
  switch (
$editor) {
    case
'tinymce':
      if (
$version > 3) {
       
$plugins['paintweb'] = array( // This key is assumed to be the internal plugin name.
       
'description' => t('PaintWeb is a Web application which allows users to draw inside the Web browser.'),
       
'path' => drupal_get_path('module', 'paintweb') .'/plugins/editor_plugin.js',
       
// The plugin will automatically be loaded if any of these buttons are enabled. Only need 'extensions' if the plugin has no buttons.
       
'buttons' => array(
         
// Registers a button with the internal name 'paintwebEdit' and the title 'PaintWeb Edit' [shown in button list].
         
'paintwebEdit' => t('PaintWeb Edit')
        ),
       
'options' => array( // This object is merged with the editor settings object.
         
'paintweb_config' => array(
           
'overlayButton' => t('Edit'),
           
'contextMenuEdit' => t('Edit the image in PaintWeb'),
           
'overlayLoading' => t('PaintWeb is loading...'),
           
'statusImageEditing' => t('You are editing an image from TinyMCE.'),
           
'statusSavingImage' => t('Saving image changes...'),
           
'statusImageSaved' => t('Image save completed successfully!'),
           
'statusImageSaveFailed' => t('Image save failed!'),
           
'imageSaveButton' => t('Save'),
           
'imageSaveButtonTitle' => t('Save the image and return to TinyMCE.'),
           
'cancelButton' => t('Cancel'),
           
'cancelButtonTitle' => t('Cancel image edits and return to TinyMCE.'),
           
'submitUnsaved' => t('The image is not saved! You cannot submit the form. Please save the image changes, or cancel image editing, then try again.'),
          ),
         
'tinymce' => array(
           
'paintwebFolder' => drupal_get_path('module', 'paintweb'),
           
'imageDataURLfilter' => "/path/to/some.php",
           
'imageSaveDataURL' => true,
           
'overlayButton' => true,
           
'contextMenuItem' => true,
           
'dblclickHandler' => true,
           
'pluginBar' => true,
           
'syncViewportSize' => true,
          ),
        ),
       
// The plugin is not located inside the editor's own plugins folder so no need to set 'internal'.
       
'url' => 'http://paintweb.googlecode.com/svn/trunk',
       
'load' => TRUE,
        );
      }
      break;
  }
  return
$plugins;
}
?>
Apfel007’s picture

Hi TwoD,
thanks for that, looks better :-) but is not working for me.. The editor buttons are not appearing.. :-( What could missing?

Have a look on http://code.google.com/p/paintweb/wiki/UsageInTinyMCE

http://groups.google.com/group/paintweb/browse_thread/thread/309dc57efc5...

What do think- is it really recommended in Drupal to put the plugin into the TinyMCE folder?

Cheers

Apfel007’s picture

Status:Fixed» Needs review

sorry for reopen it again.. but it seems, something is missing see above..

TwoD’s picture

Status:Needs review» Active

Yeah, something's wrong. On my testsite it looks like the options are not being merged correctly with the editor options. The sub-options all get combined into a string. Not sure why it's happening, but I'm looking into it.

Apfel007’s picture

Thanks for have a look on it

TwoD’s picture

I found the problem and created a bug report against the TinyMCE implementation: #781086: Wrongly merged plugin options.

Until that's fixed, you can work around the issue using hook_wysiwyg_editor_settings_alter().

I made a wquick test by downloading the whole PaintWeb package to sites/all/libraries/paintweb, added Libraries API as a dependency and craeted the below files in sites/all/modules/paintweb.

paintweb.info

; $Id: $
name = PaintWeb
description = Integrates the paintweb library with TinyMCE via Wysiwyg module.
package = User interface
core = 6.x
dependencies[] = libraries

paintweb.module

<?php
/**
* Implementation of hook_wywiwyg_plugin().
*/
function paintweb_wysiwyg_plugin($editor, $version) {
 
$plugins = array();
  switch (
$editor) {
    case
'tinymce':
      if (
$version > 3) {
       
$plugins['paintweb'] = array(
         
'description' => t('PaintWeb is a Web application which allows users to draw inside the Web browser.'),
         
'path' => libraries_get_path('paintweb') . '/ext/tinymce-plugin/paintweb/editor_plugin_src.js',
         
'buttons' => array(
           
'paintwebEdit' => t('PaintWeb Edit'),
          ),
         
'options' => array(
           
// See paintweb_wysiwyg_editor_settings_alter().
           
'paintweb_config' => TRUE,
          ),
         
'url' => 'http://paintweb.googlecode.com/svn/trunk',
         
'load' => TRUE,
        );
      }
      break;
  }
  return
$plugins;
}


/**
 * Implementation of hook_wysiwyg_editor_settings_alter().
 *
 * Workaround for #781086.
 */
function paintweb_wysiwyg_editor_settings_alter($settings, $context) {
  if(
$context['profile']->editor == 'tinymce' && isset($settings['paintweb_config'])) {
   
$settings['paintweb_config'] = array(
     
'overlayButton' => t('Edit'),
     
'contextMenuEdit' => t('Edit the image in PaintWeb'),
     
'overlayLoading' => t('PaintWeb is loading...'),
     
'statusImageEditing' => t('You are editing an image from TinyMCE.'),
     
'statusSavingImage' => t('Saving image changes...'),
     
'statusImageSaved' => t('Image save completed successfully!'),
     
'statusImageSaveFailed' => t('Image save failed!'),
     
'imageSaveButton' => t('Save'),
     
'imageSaveButtonTitle' => t('Save the image and return to TinyMCE.'),
     
'cancelButton' => t('Cancel'),
     
'cancelButtonTitle' => t('Cancel image edits and return to TinyMCE.'),
     
'submitUnsaved' => t('The image is not saved! You cannot submit the form. Please save the image changes, or cancel image editing, then try again.'),
    );
   
$settings['tinymce'] = array(
     
'paintwebFolder' => libraries_get_path('paintweb') . '/build/',
 
//      'imageDataURLfilter' => "/path/to/some.php",
     
'imageSaveDataURL' => true,
     
'overlayButton' => true,
     
'contextMenuItem' => true,
     
'dblclickHandler' => true,
     
'pluginBar' => true,
     
'syncViewportSize' => true,
    );
  }
}
?>
Apfel007’s picture

Status:Active» Fixed

Hi TwoD,
thank you very much for your efforts. I made a quick test..
It seems that this is not working:
'paintwebFolder' => libraries_get_path('paintweb'),

I changed it into:
'paintwebFolder' => libraries_get_path('paintweb') . '/ext/tinymce-plugin/paintweb/',

Now I got the icon and popup. But the popup can't submitted..
What do you think?

And in my implementation, it seems to be a problem with the lang-strings in the popup. The strings are not included.. I will have a look on the pathes in JS.. maybe I find a hint.

Apfel007’s picture

It seems that the plugin files have to go to the tinymce pluginfolder because the paintweb js is calling:

tinymce.PluginManager.add('paintweb', tinymce.plugins.paintweb);

http://wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.PluginManager

For our scenario we would need the method "load"not add.

TwoD’s picture

Actually, paintwebFolder should be 'paintwebFolder' => libraries_get_path('paintweb') . '/build/',. It's the path of the PaintWeb library itself, not the TinyMCE plugin, as the example on http://code.google.com/p/paintweb/wiki/UsageInTinyMCE. Changed this above.

I just noticed that the PaintWeb plugin for TinyMCE has a hardcoded path to tiny_mce_popup.js in one of its files, that's why the translatable strings don't work when not placing it in TinyMCE's internal plugin folder.

So, copy the paintweb plugin folder to TinyMCE's plugin folder and change path' => libraries_get_path('paintweb') . '/ext/tinymce-plugin/paintweb/editor_plugin_src.js', to 'internal' => TRUE, in hook_wysiwyg_plugin().
You might also need to copy/rename editor_plugin_src.js to editor_plugin.js, or TinyMCE won't find it.

Now I can insert a blank image to work on, haven't had time to test more than that though.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

R-Man’s picture

Anyone have the final working Paint Web intregrated to Tinymce?

omllobet’s picture

Hi R-Man, check my repository at:

http://drupal.org/sandbox/omllobet/1142136

there's a module in there called paint_wysiwyg