I currently am using TinyTinyMCE to integrate my editor, but I want to convert to WYSIWYG for its many improved features.

The only thing that is holding me back is that I cannot figure out how to add a simple button to my editor. TinyTinyMCE allows me to do it by simply adding this code to the "TinyMCE init script":

   setup : function(ed) {
    ed.addButton('MTGcard', {
        title : 'Magic the Gathering Card',
        image : '/q/sites/all/themes/custom/blackborder/pix/miniMTGcard.gif',
        onclick : function() {
          ed.selection.setContent('[card]' + ed.selection.getContent() + '[/card]');
      }

I need to add this simple button to TinyMCE (or other WYSIWYG editor) using this module.

I've tried to do it writing a WYSIWYG plugin, reading http://drupal.org/files/issues/wysiwyg_api_documentation.patch and also looking at the break plugin and img_assist plugin.

I've managed to get my plugin to appear on the list of available "buttons and plugins", but when I go to the edit node form, the button is not there.

My question is: is a plugin the correct approach for adding a simple button like this and, if it is, is there any WYSIWYG plugin API documentation I can use to learn how to do it?

Comments

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Active » Postponed (maintainer needs more info)

Writing a full plugin for a simple button like this sounds like a fair amount of overhead. Unfortunately, there not many contributed modules for Wysiwyg module yet, so I can't point you to a definite solution. However, I wonder whether http://drupal.org/project/wysiwyg_template wouldn't work for you.

sun’s picture

sun
Primary language German
Location Karlsruhe
commented
Status: Postponed (maintainer needs more info) » Closed (won't fix)

Sorry, without further information this issue can only be marked as won't fix.

Feel free to re-open this issue if you want to provide further information. Thanks.

Oliakaoil’s picture

Oliakaoil commented

I recently ran into this very same problem and was able to solve it by modifying your code a bit and adding it in via hook_wysiwyg_plugin and a custom module (I'm using the WYSIWG API module with TinyMCE). Here's the Javascript:

Drupal.settings.wysiwyg.configs.tinymce.format2.setup =  function(ed) {
       
  ed.addButton('custom-button1', {
    title : 'Custom Button Title',
    image : '/path/to/button/image.png',
    onclick : function() {
      /// some button functionality here	
    }
  });
}

Drupal.settings.wysiwyg.configs.tinymce.format2.theme_advanced_buttons1 += ",custom-button1";

It's not pretty but it seems to work

anirudhr’s picture

anirudhr commented

Hello. I'm a bit new to Drupal as well as to web programming.

I want to add functionality to WYSIWYG + TinyMCE 3.x for pasting images from clipboard. I am using the applet from http://lassebunk.dk/2009/07/19/using-the-clipboard-to-post-images/ for this.

I want to add a button to my editor. Please help me do this. Where do I write this init script?