how to add tinyMCE3 custom plugin [#2237761]

Hello,
I wanna add a custom plugin to TinyMCE editor. It does not add any button to the editor but it ads a feature where users can right click on a word inside the editor and plugin provides an option to add that word to a custom dictionary and my module will take care of.

How can I achieve that?

Thanks

Comments

Comment #1

TwoD

Swedish

Sweden

CreditAttribution: TwoD commented 14 April 2014 at 11:36

Priority:	Major	» Normal
Status:	Active	» Fixed
Issue tags:	-#plugin, -#tinymce, -#wysiwyg

You can tell Wysiwyg module about plugins by implementing hook_wysiwyg_plugin(), following the example in wysiwyg.api.php.

/**
 * Implements hook_wysiwyg_plugin().
 */
function mymodule_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'tinymce':
      if (version_compare($version, 3, '>=') && version_compare($version, 4, '<')) {
        return array(
          'myplugin' => array(
            // A URL to the plugin's homepage, optional.
            'url' => 'http://example.com/myplugin',
            // The full path to the native editor plugin, no trailing slash.
            // Ignored when 'internal' is set to TRUE below.
            'path' => wysiwyg_get_path('tinymce_plugins', TRUE) . '/myplugin',
            // A list of editor extensions provided by this native plugin.
            // Extensions are not displayed as buttons and touch the editor's
            // internals, so you should know what you are doing.
            'extensions' => array(
              'internal_name_of_myplugin' => t('Name to show under Buttons and Plugins'),
            ),
            // Boolean whether the editor needs to load this plugin. When TRUE,
            // the editor will automatically load the plugin based on the 'path'
            // variable provided. If FALSE, the plugin either does not need to
            // be loaded or is already loaded by something else on the page.
            // Most plugins should define TRUE here.
            'load' => TRUE,
            // Boolean whether this plugin is a native plugin, i.e. shipped with
            // the editor. Definition must be ommitted for plugins provided by
            // other modules. TRUE means 'path' and 'filename' above are ignored
            // and the plugin is instead loaded from the editor's plugin folder.
            'internal' => FALSE,
          ),
        );
      }
      break;
  }
}

Then place your plugin's script file as sites/default/libraries/tinymce_plugins/myplugin/editor_plugin.js. You can also place it in your module's folder, and use base_path() . drupal_get_path('module', 'mymodule') . '/......' for 'path' instead.

Comment #2

atomicreach CreditAttribution: atomicreach commented 14 April 2014 at 16:39

Thanks, that seems to be working.

One question tho.. What should I call the actual .js file ? Right now I have it called "editor_plugin" in a folder called "customDictionaryContextMenu" inside "inc" folder and extension is "customDictionaryContextMenu" as well....

But it is throwing following errors in the console. What am I missing. Path is right though.

TypeError: this.getDoc(...) is undefined ...urce for: http://domain.com/drupal6/sites/all/libraries/tinymce/jscrip...

tiny_mce.js?0 (line 1)
"NetworkError: 404 Not Found - http://omain.ca/.errordocs/403.html"
403.html
Failed to load: /drupal6/sites/all/modules/xyz/inc/customDictionaryContextMenu

Here is how the hook look like

function xyz_wysiwyg_plugin($editor, $version=0) {
switch ($editor) {
    case 'tinymce':
      if (version_compare($version, 3, '>=') && version_compare($version, 4, '<')) {
        return array(
          'myplugin' => array(
            // A URL to the plugin's homepage, optional.
            'url' => 'http://www.xyz.com/',
            // The full path to the native editor plugin, no trailing slash.
            // Ignored when 'internal' is set to TRUE below.
                //'path' => wysiwyg_get_path('tinymce_plugins', TRUE) . '/myplugin',
                'path' => drupal_get_path('module', 'xyz') . '/inc/customDictionaryContextMenu',
            // A list of editor extensions provided by this native plugin.
            // Extensions are not displayed as buttons and touch the editor's
            // internals, so you should know what you are doing.
            'extensions' => array(
              'internal_name_of_myplugin' => t('customDictionaryContextMenu'),
            ),
            // Boolean whether the editor needs to load this plugin. When TRUE,
            // the editor will automatically load the plugin based on the 'path'
            // variable provided. If FALSE, the plugin either does not need to
            // be loaded or is already loaded by something else on the page.
            // Most plugins should define TRUE here.
            'load' => TRUE,
            // Boolean whether this plugin is a native plugin, i.e. shipped with
            // the editor. Definition must be ommitted for plugins provided by
            // other modules. TRUE means 'path' and 'filename' above are ignored
            // and the plugin is instead loaded from the editor's plugin folder.
            'internal' => FALSE,
          ),
        );
      }
      break;
  }
}

Comment #3

atomicreach CreditAttribution: atomicreach commented 14 April 2014 at 17:13

following fixed it
'path' => drupal_get_path('module', 'xyz') . '/inc/customDictionaryContextMenu/editor_plugin.js',

However, my plugin cannot find TinyMCE instance.... any idea ?

(function() {
	var Event = tinymce.dom.Event, each = tinymce.each, DOM = tinymce.DOM;

	/**
	 * This plugin a context menu to TinyMCE editor instances.
	 *
	 * @class tinymce.plugins.CustomDictionaryContextMenu
	 */
	tinymce.create('tinymce.plugins.CustomDictionaryContextMenu', {
// It does not execute this...

}