Wysiwyg button with form #2

Print

Welcome to the second article in my tutorial about building a wysiwyg button for drupal 7 which enables use to inserting tokens.

This will be a four step tutorial

For this part we will build a simple wysiwyg button which inserts the basic struckture of our token.

This code is highly inspired by this article on http://deglos.com

To begin with we need to tell drupal that we have a plugin for wysiwyg in our module. We do this my invoking the hook_wysiwyg_include_directory.

  1. /**
  2.  * implements hook_wysiwyg_include_directory
  3.  */
  4. function example_wysiwyg_include_directory($type) {
  5.   return $type;
  6. }

now we need to build the plugin structure, so i our module we will create a new folder called plugins. In this folder we need an .inc file with the same name as our plugin as well as a folder with the same name. In the folder we then need to create an images folder and place an icon image file there. I created a icon.png for this. besides the images folder we need to create two files, a js and a css file with the same names as the plugin.

So if we give our plugin the name tokenInsert the file structure should be

<module>/plugins/tokenInsert.inc
<module>/plugins/tokenInsert/tokenInsert.js
<module>/plugins/tokenInsert/tokenInsert.css
<module>/plugins/tokenInsert/images/icon.png

Okay now for the code in the files.

In the tokenInsert.inc file we will provide wysiwyg with information about our plugin by invoking the hook_wysiwyg_plugin

  1. /**
  2.  * Implementation of hook_wysiwyg_plugin().
  3.  */
  4. function example_tokenInsert_plugin() {
  5.   $plugins['tokenInsert'] = array(
  6.     'title' => t('Insert object'),
  7.     'icon file' => 'icon.png',
  8.     'icon title' => t('Insert objects'),
  9.     'settings' => array(),
  10.   );
  11.   return $plugins;
  12. }

that is it for this file.

The javascript file will provide the functionality for wysiwyg.

  1. // $Id$
  2. (function ($) {
  3.  
  4. Drupal.wysiwyg.plugins['example'] = {
  5.  
  6.   /**
  7.    * Return whether the passed node belongs to this plugin (note that "node" in this context is a JQuery node, not a Drupal node).
  8.    *
  9.    * We identify code managed by this example plugin by giving it the HTML class
  10.    * 'wysiwyg-plugin-example'.
  11.    */
  12.   isNode: function(node) {
  13.     res = $(node).is('img.wysiwyg-plugin-example');
  14.     return ($(node).is('img.wysiwyg-plugin-example'));
  15.   },
  16.  
  17.   /**
  18.    * Invoke is called when the toolbar button is clicked.
  19.    */
  20.   invoke: function(data, settings, instanceId) {
  21.      // Typically, an icon might be added to the WYSIWYG, which HTML gets added
  22.      // to the plain-text version.
  23.      if (data.format == 'html') {
  24.        var content = this._getPlaceholder(settings);
  25.      }
  26.      else {
  27.        var content = '<!--wysiwyg-plugin-example-->';
  28.      }
  29.      if (typeof content != 'undefined') {
  30.        Drupal.wysiwyg.instances[instanceId].insert(content);
  31.      }
  32.    },
  33.  
  34.   /**
  35.    * Replace all <!--wysiwyg-plugin-example--> tags with the icon.
  36.    */
  37.   attach: function(content, settings, instanceId) {
  38.     content = content.replace(/<!--wysiwyg-plugin-example-->/g, this._getPlaceholder(settings));
  39.     return content;
  40.   },
  41.  
  42.   /**
  43.    * Replace the icons with <!--wysiwyg_example_plugin--> tags in content upon detaching editor.
  44.    */
  45.   detach: function(content, settings, instanceId) {
  46.     var $content = $('<div>' + content + '</div>');
  47.     $.each($('img.wysiwyg-plugin-example', $content), function (i, elem) {
  48.       elem.parentNode.insertBefore(document.createComment('wysiwyg-plugin-example'), elem);
  49.       elem.parentNode.removeChild(elem);
  50.     });
  51.     return $content.html();
  52.   },
  53.  
  54.   /**
  55.    * Helper function to return a HTML placeholder.
  56.    *
  57.    * Here we provide an image to visually represent the hidden HTML in the Wysiwyg editor.
  58.    */
  59.   _getPlaceholder: function (settings) {
  60.     return '<img src="' + settings.path + '/images/icon.png" alt="&lt;--wysiwyg-plugin-example-&gt;" title="&lt;--wysiwyg-plugin-example--&gt;" class="wysiwyg-plugin-example drupal-content" />';
  61.   }
  62. };
  63.  
  64. })(jQuery);

The css file should contain styling specific for this plugin and what it renders, make sure to keep it aas general as possible so it is easy to overwrite.

That is it for our initial button.

Now we need to expand it with a multifield form to allow us to insert token elements based on user input.

Category: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image.