Forum closed. New forum available at http://community.wymeditor.org/

Adding a new button to the toolbar

Support forum for WYMeditor.

Adding a new button to the toolbar

Postby mikovali on Wed Jul 29, 2009 1:42 pm

First of all, great editor. Really loving it. Specially the lightness and clearity of the code. Awesome really!

But to the problem.
I browsed the code and found out, that when a button on the toolbar is clicked, it executes the exec function (WYMeditor.editor.prototype.exec).
And in that function there is a switch block to open dialogs for specific things and default is execCommand.

I'm not very familiar with the execCommand, but as I understand, it calls specific actions that are defined by the language (or browser?).

What I want is to add a new button that opens a dialog with some custom markup.
Do I really need to write a "case myButtonName" block in the code, or can I extend or do something without touching the WYMeditor code itself?
mikovali
 
Posts: 2
Joined: Wed Jul 29, 2009 1:29 pm

Re: Adding a new button to the toolbar

Postby Nico on Fri Jul 31, 2009 3:42 pm

Hi,

You can add a new button without touching the wymeditor's code.

What I recommand is to build a plugin for your fonctionality, and than you include this plugin, and you call it in the skin you use, or in the postInit function.

This is an exemple of code you could use as a base to make your dialog plugin. I extracted this from a plugin I made, but my plugin was much more messy, so I can't publish it all :

Code: Select all
;window.jQuery && (function($) {

   var html = '<body class="wym_dialog wym_dialog_myplugin"'
      + ' onload="window.opener.WYMeditor.INIT_MY_DIALOG(window, ' + WYMeditor.INDEX + ')"'
      + '>'
      // The HTML code here for the dialog
      + '</body>'

   WYMeditor.INIT_MY_DIALOG = function(wdw, index) {
      var wym = WYMeditor.INSTANCES[index];
      var doc = wdw.document;
      var selected = wym.selected();

      //add css rules from options
      var styles = doc.styleSheets[0];
      var aCss = eval(wym._options.dialogStyles);
      wym.addCssRules(doc, aCss);

//   ....... Any code you want. You can take exemple on WYMeditor.INIT_DIALOG
//    Handle here events like form submition for exemple.
   };

   $.extend(WYMeditor.editor.prototype, {
      // Function to be called for initialisation in the skin init, or in postInit
       MyPluginInit: function() {
         var dialog = (function(wym) {
            return function() {
               wym.dialog( 'Dialog Title', html );
               return false;
            };
         })(this);

         // Insert a button in the toolbox after the link button
         $(this._box)
            .find('.wym_tools ul .wym_tools_link')
               .after(
                  $(
                     '<li class="wym_tools_myplugin">'+
                        '<a title="Insert what I want" href="#">'+
                           'Insert what I want'+
                        '</a>'+
                     '</li>'
                  )
                     .mousedown(dialog)
               );
      }
   });
})(window.jQuery);



Nico
Nico
 
Posts: 19
Joined: Tue Jun 23, 2009 6:49 pm

Re: Adding a new button to the toolbar

Postby mikovali on Tue Sep 01, 2009 12:09 pm

Well my problem is that when I user clicks my new button on the toolbar, how do I add a listener to it. How does it opens the dialog that I've specified in the first place.
The onload for the dialog doesn't help if the dialog itselt does not open.

I'm really sorry, if this is very easy and staring me right at my face.
mikovali
 
Posts: 2
Joined: Wed Jul 29, 2009 1:29 pm

Re: Adding a new button to the toolbar

Postby mr_lundis on Mon Oct 05, 2009 3:22 pm

If you look in Nico's code, it's all there.

Nico defines an event handler that opens up a new dialog and injects a reference to the WYM instance into it's scope:
Code: Select all
         var dialog = (function(wym) {
            return function() {
               wym.dialog( 'Dialog Title', html );
               return false;
            };
         })(this);

Then Nico adds a new button to the toolbar and binds the dialog function to the mousedown (click) event.
Code: Select all
         $(this._box)
            .find('.wym_tools ul .wym_tools_link')
               .after(
                  $(
                     '<li class="wym_tools_myplugin">'+
                        '<a title="Insert what I want" href="#">'+
                           'Insert what I want'+
                        '</a>'+
                     '</li>'
                  )
                     .mousedown(dialog)
               );


In other words, you cant modify the dialog function to do whatever you want when a users click your button. And you you need to access you button again you could store a reference to the jQuery object or access it using it's class (wym_tools_myplugin).

Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden

Re: Adding a new button to the toolbar

Postby murphy on Wed Mar 10, 2010 1:02 pm

I use following code for create plugin. It is add a new button and opens a dialog with title. But content of the dialog "undefined", and there are no javascript errors.

Code: Select all
; window.jQuery && (function($) {

   var html =  "<body class='wym_dialog wym_dialog_video'"
   + " onload='WYMeditor.INIT_MY_DIALOG(window, ' + WYMeditor.INDEX + ')'"
   + ">"
   + "<form action='/index.php/upload/video?wym="+WYMeditor.INDEX+"' method='post' enctype='multipart/form-data'>"
    ...  //  dialog html
   + "</body>";

   WYMeditor.INIT_MY_DIALOG = function(wdw, index) {
      var wym = WYMeditor.INSTANCES[index];
      var doc = wdw.document;
      var selected = wym.selected();

      //add css rules from options
      var styles = doc.styleSheets[0];
      var aCss = eval(wym._options.dialogStyles);
      wym.addCssRules(doc, aCss);

//   ....... Any code you want. You can take example on WYMeditor.INIT_DIALOG
//    Handle here events like form submition for example.
   };

   $.extend(WYMeditor.editor.prototype, {
      // Function to be called for initialisation in the skin init, or in postInit
       VideoInit: function() {
         var dialog = (function(wym) {
            return function() {
               wym.dialog('Upload video', html);
               return false;
            };
         })(this);

         // Insert a button
         jQuery(this._box)
            .find('.wym_tools ul')
               .append(
                  jQuery(
                        "<li class='wym_tools_fullscreen'>"
                          + "<a name='Video' title='video' href='#'"
                          + " style='background-image:"
                          + " url(" + this._options.basePath +"plugins/video/icon_video.gif)'>"
                          + "Video"
                          + "</a></li>"
                  )
                  .mousedown(dialog)
               );
      }
   
   });
})(window.jQuery);



And init it:
Code: Select all
jQuery(function() {
   stylesheet: '/css/wymeditor.css',      
    jQuery('.wymeditor').wymeditor({ lang: 'ru', stylesheet: '/css/wymeditor.css',
        postInit: function(wym) {
        wym.VideoInit();   
      } 
   });
});


What I doing wrong?
murphy
 
Posts: 1
Joined: Wed Mar 10, 2010 12:45 pm

Re: Adding a new button to the toolbar

Postby mr_lundis on Thu Apr 01, 2010 12:58 pm

Changing
Code: Select all
wym.dialog('Upload video', html);

to

Code: Select all
wym.dialog('Upload video', '', html);

will probably do the trick. Cheers! ;)
Jonatan Lundin - designer, developer and forum moderator. You should follow me on Twitter!
mr_lundis
 
Posts: 335
Joined: Sun Dec 02, 2007 10:59 am
Location: Sweden


Return to Support

Who is online

Users browsing this forum: No registered users and 3 guests

cron