Is there any documentation available about how to create an own set set of plugins, available to all editors.
Reason: I like to create a plugin to add smileys to the editor like the break-plugin. I took over an old website for kids and are going to rebuild it in Drupal 6. But I really need smileys in several node-types and a guestbook together with the other editor buttons. I have been looking at the smileys module. This creates a separate block above the editor: this is like the smileys button with the popup-smileys, but it is extendible. I prefer to have everything in the toolbar.
I have been tinkering: I started with 2 smileys and managed to add these to the editor buttons in the settings. But when I create a new page I get as error "unknown item on toolbar smiley1".
I think it should be possible to create only one plugin set of definition files and not for each one of them the whole bunch of files (at least 6) for each smiley. Is this correct?
I also think it should be possible to directly add the link in the code. Is this correct?
Can you help me out?
Thanks.

CommentFileSizeAuthor
#15 icons_module.zip9.56 KBtwod
#13 icons_6.zip4.38 KBpromes

Comments

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Active » Fixed

The plugin documentation can be found in wysiwyg.api.php and wysiwyg.api.js in the wysiwyg folder.
The implementations have problems with using multiple buttons in a single cross-editor plugin. (The plugin and button names are expected to be the same.)
You can however return multiple plugin definitions in the same hook_wysiwyg_plugin() implementation.

To avoid having to create more than one JavaScript integration file, you should be able to set the 'js path' and/or 'js file' keys to the same values in all plugins. drupal_add_js() should notice they're all the same files and only add once reference to them.
To know which button was pressed, use the 'settings' key in the plugin definitions to store a unique "marker" for each plugin/button.

/**
 * Implementation of hook_wysiwyg_plugin().
 */
function MYMODULE_MY-INC-FILE_plugin() {
  $plugins['smilies1'] = array(
    'title' => t('Smilies 1'),
    'icon file' => 'smiley1.gif',
    'icon title' => t('Insert smiliey 1'),
    'settings' => array('pressedSmileyButton' => 'smiliey1'),
  );
  $plugins['smilies2'] = array(
    'title' => t('Smilies 2'),
    'icon file' => 'smiley2.gif',
    'icon title' => t('Insert smiliey 2'),
    'settings' => array('pressedSmileyButton' => 'smiliey2'),
  );
  $plugins['smilies3'] = array(
    'title' => t('Smilies 3'),
    'icon file' => 'smiley3.gif',
    'icon title' => t('Insert smiliey 3'),
    'settings' => array('pressedSmileyButton' => 'smiliey3'),
  );

  return $plugins;
}

(Example code not tested.)
The settings argument in the integration file's invoke() method will then have a property named 'pressedSmileyButton' that will tell you which button was pressed.

Hope that helps. =)

Please reactivate this issue if you encounter problems.

promes’s picture

promes
Primary language Dutch
commented

Thanks for more info then expected. I'll study other implementations. For one button I got it working, but to integrate all of them needs a bit of study.
I will share my results.

promes’s picture

promes
Primary language Dutch
commented

I managed to get it all done. I only have one each .inc and .js files.
I still have questions. I hope you can help me:

1. The width of smilies on the toolbar. I use a set of smilies of different width and height, from 35x18 px to 15x15 px. On the toolbar all have the same width and height (about 22x22px). So the widest buttons are unrecognizable. Is there a way to get a button wider on the toolbar? I tried several definitions in the .css-file: both the real width and 100% together with the real height.

2. I did a test in the .js file. The only definition that matters (as far as I can see) is the invoke function. Both of the definitions below do the job.

Drupal.wysiwyg.plugins['s1'] = {
  invoke: function(data, settings, instanceId) {
    if (data.format == 'html') {
      var content = '<img src="' + settings.path + settings.myicon + '" alt="' + settings.alt + '" title="' + settings.alt + '" class="' + settings.class + ' drupal-content" />';
      Drupal.wysiwyg.instances[instanceId].insert(content)
    }
  }
};

Drupal.wysiwyg.plugins['s2'] = {
  isNode: function(node) {
    return ($(node).is('img.wysiwyg-s2'));
  },

  invoke: function(data, settings, instanceId) {
    if (data.format == 'html') {
      var content = '<img src="' + settings.path + settings.myicon + '" alt="' + settings.alt + '" title="' + settings.alt + '" class="' + settings.class + ' drupal-content" />';
      Drupal.wysiwyg.instances[instanceId].insert(content)
    }
  },

  attach: function(content, settings, instanceId) {
    return content;
  },

  detach: function(content, settings, instanceId) {
    return content;
  }
};

Are the functions: isNode, attach and detach required?

3. Are you interested in a new add-on module named emoticons? If so, I like to donate the module to all of us.

Thank you for your help.

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

1. The button sizes are controlled by the editor's own stylesheets. I do not know what the styling rules look like so I'd have to look it up to give a good answer. I think some editors may be setting the button height and width using inline styles so I'm not sure just targeting them with a CSS selector in the plugin stylesheets will do.

2. Implementing the isNode, attach and detach methods is optional. These are good to have if your module had been using some other "tokens" than actual image tags and an input filter to replace the tokens with images during rendering. You could then have used the attach method to convert those token to more visually pleasing placeholders for WYSIWYG mode, and the detach method to convert the visual placeholder back into a token for database storage. The isNode method would have been a way for your plugin to signal the editor that the currently selected element is of interest to it (at which point the editor could highlight its toolbar button).

3. We currently do not accept plugins which are not directly related to Drupal Core functionality, part because we need to stay on focus and part because we're already short of time. If you feel like it, you could publish it as a new module, or maybe as the start of a wysiwyg_contrib collection?

oxen’s picture

oxen commented

Can you please post your complete code? All I want to do is make a button which will include a custom, predefined html snippet. "

" and cannot figure this out. I don't really know js but am doing pretty good with php and drupal. It seems like you have figured out more than most of us. Maybe write a brief tutorial?
Thanks,
Mark

promes’s picture

promes
Primary language Dutch
commented

Oxen, you want to insert some html. In fact I do the same. The difference can be removing the html when it is at the wrong place in the text. Since I insert an image-html-block (starting with: < img and ending with: />, the editor is able to remove this code without help in the .js file. I don't know what your code is about but you have to figure out yourself how to remove the code whenever necessary.
There are two places where you can define your code. The most easy place is in the .js file:
The definition in my .js file is:

Drupal.wysiwyg.plugins['buttonname'] = {
  invoke: function(data, settings, instanceId) {
    if (data.format == 'html') {
      var content = '<img src="' + settings.path + settings.w-icon + '" alt="' + settings.alt + '" title="' + settings.alt + '" class="' + settings.class + ' drupal-content" />';
      Drupal.wysiwyg.instances[instanceId].insert(content)
    }
  }
};

As far as I understand, the only line you have to change is:

var content = '<img src="' + settings.path + settings.w-icon + '" alt="' + settings.alt + '" title="' + settings.alt + '" class="' + settings.class + ' drupal-content" />';

into:

var content = 'put here your html code';

If you like to use the .inc file, change in the $plugin[] definition the settings-line:
'settings' => array('mycode' => 'put here your html code'),
and change the line in the above .js file into:

var content = settings.mycode;

Attention: the name 'mycode' in the settings-array an the .js line should be equal.

Good luck.

promes’s picture

promes
Primary language Dutch
commented

Hello TwoD,

Thanks for your help. I almost have finished my code. It does work, but I like it to be more general and more easy to change for other users.
I did test it in all currently available wysiwyg-editors. In fact only CKEditor, FCKeditor and TinyMCE accept plugins. They all have a different way to show the images, which limits the size of the images.
When thinking over, I found out it is not an emoticon / smilies plugin anymore but a general icon plugin. In some of my projects I can use this very well, but never thought about to do it this way.

I would be pleased to donate my plugin as a wysiwyg_contrib. I don't know how to do this. Do I have to apply for a CVS account? If so, do you open a contrib-library.
Shortly: what do I have to do to donate my plugin?

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

Since - as far as I know - there's currently no "contrib collection" module for use with Wsyiwyg module, you could apply for a CVS account and state that you would like to be the maintainer of such a module. (I don't know the requirements for a module to be accepted by hand, but if it's well written and has a distinct purpose I don't think there will be many objections.) There are how-tos and other information about these procedures in the Drupal.org handbooks.

If you don't feel like having the maintainer responsibility, maybe someone else does and will create a similar contrib-module later. Then you could submit your code as a patch or sub-module by posting it in their issue queue.

You could also simply post your plugin code somewhere on the Drupal wiki, maybe around Extending Wysiwyg. Though I wouldn't recommend that if it isn't very short.

Status: Fixed » Closed (fixed)

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

promes’s picture

promes
Primary language Dutch
commented

Sorry for all of you who like to use my icons plugin, where you can insert your own icons to be used in the toolbar of wysiwyg.
I tried to apply for a CVS account and got this answer:
"You can apply for a CVS if you have a module, or a theme, or an installation profile to commit; those are the only types of projects you can create on Drupal.org, and for which you can get a CVS account.".
Drop me a line when you like to use it.

promes’s picture

promes
Primary language Dutch
commented

I started using the plugin in a new website and found a problem. The icons will show in the toolbar when I am logged in as user 1, but otherwise the icons are not found in the toolbar (even when the input format is full html). The icons are set / defined in the buttons admin section of wysiwyg.
The break-plugin (when defined) is shown even for guests.
Is there a setting I don't know somewhere or do I have to define another setting in the icons.inc file?
Can you help me again?

twod’s picture

twod
Primary language Swedish
Location Sweden
commented

There are currently no per user or role restrictions in Wysiwyg, it just checks if an input format is available before loading the editor settings and plugins associated with it.

I'm not sure what would cause such an issue, and I'd need to see your code to know more. Could you please paste/attach it here and reopen the issue if you can't solve the problem?

promes’s picture

promes
Primary language Dutch
commented
StatusFileSize
new icons_6.zip4.38 KB

I am sorry for the delay. It is a busy time and I wanted to test more situations.
I did test it (on a windows/vista pc) both with a hosted site and a localhost site with several browsers and different results.
1. Windows Internet Explorer version 6 thru 8 and Safari 5.0.1: icons are not shown, break-plugin is shown
2. Firefox 3.0 and 3.6, Opera 10.53 and Google Chrome 5.0.375.126 do show
I did test it as user 0 with filterered HTML format.

I did attach my plugin for Drupal 6 and hope you can find where I can improve the implementation.

Thanks.

promes’s picture

promes
Primary language Dutch
commented
Status: Closed (fixed) » Active

It has been some time ago since I posed my question. Do you have an answer?

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
StatusFileSize
new icons_module.zip9.56 KB

Sorry, I missed this because it was still closed and it probably fell too far back on my activity tracker.

The IE problems are probably caused by using settings.class instead of settings['class']. "class" is a reserved word for JScript (IE) so using it without the array notation will throw errors.

I suggest this is rewritten to a standalone module, so it won't have to be put in the wysiwyg folder. We don't support modifications of the module or the library files as it makes it harder for the user to upgrade them.

I took the liberty of doing that conversion and threw in a couple of other handy things. ;)

twod’s picture

twod
Primary language Swedish
Location Sweden
commented
Status: Active » Fixed

Whops, status change..

promes’s picture

promes
Primary language Dutch
commented
Status: Fixed » Active

Hello TwoD,

Thanks a lot for all your work. I have been on a trip and returned yesterday.
The transformation to a module was a great and positive surprise.
Today I did a test. It works as expected with FCKeditor 2.6.5 and CKEditor 3.3.1.5586. But in TinyMCE 3.2.7 the icons don't show. All the same in Firefox 3.0 and 3.6, IE 6 and 7, Chrome, Safari and Opera.

Since TinyMCE is my preferred editor... Is it the version that prevents showing?

Do you have some more spare time to investigate this?

Thanks,

Promes

promes’s picture

promes
Primary language Dutch
commented

Did you have the time to investigate a solution for TinyMCE?
Thanks,
PROMES

eric_a’s picture

eric_a commented

@promes: are you going to set up a Drupal Icons project now that you have module code? A project would allow for more people to contribute in more ways.
Perhaps I could help out as a co-maintainer in such a project.

promes’s picture

promes
Primary language Dutch
commented

Hello Erc_A,

I indeed intend to publish the module, but did hope to include the needed update (if any) to accomodate TinyMCE. A second reason is I want to create a admin include where the user is able to define the icons instead to update the inc file by hand.
At this very moment I am very busy with several hot projects.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Active » Closed (fixed)

Documentation for this lives in wysiwyg.api.php now.