jQuery UI integration

[c_t]

At the moment i'm testing WYMeditor and implementing it into my CMS. Since the new jQuery UI is about to be launched in a first really stable version I like the idea to make use of some of the ui-features in the editor.

E.g. I think it's a good idea to optionally replace the popups for linking, word-paste and so on with jQuery-UI-like dialogs (see http://dev.jquery.com/view/trunk/ui/dem ... ialog.html ). If such changes are welcome I will commit patches to trac.

Please let me know if you are interested.

Cheers, Christoph

[rostr]

I'm not in charge here, but that kind of thing would be great. The popups are one of my main gripes about wymeditor right now.

[PACE]

Just as a quick tip: You can easily replace the dialogs with your own solution by overwriting the WYMeditor.editor.prototype.dialog function - this is the function where the popup is opened initialized. You also need to copy and modify code from WYMeditor.INIT_DIALOG - this function gets called from within the popup (on load) and populates the dialog (e.g. copying the link value from the editor) and it creates the submit handlers for updating the editor too. That's all there is about that. This might as well be released as a "plugin" (just overwite the dialog function to have new dialogs, no changes needed elsewhere).

I've also replaced the dialogs in my project, however my code isn't really suited for general use (yet) as I rolled my own version of a dialog instead of using jQuery UI and I hardly used any variables for configuring

Christoph, have you made progress with your intention?

br,
Ben

[Folken Laëneck]

Please excuse me if I made mistakes but english isn't my mother tongue

I'm also trying to use jQuery UI dialog with WYMeditor.
Since the last version of jQuery UI is not already stable, some bugs remain like allowing only a single dialog spawn per page refresh. It's a bit akward but I hope that will be fixed in the final release - It may be already fixed in the last build, since many things seems to have been changed in the library I'm waiting for the final release to integrate it further -.

However, it's not my main problem.
Dialogs run succesfully to create links or images and to preview editor's content - I don't use the table dialog - and fields are filled with the right values when editing one, but when I submit it again tu update link's or image's attributes, it ended with an NS_ERROR_NOT_IMPLEMENTED Exception in Firefox.

Did I miss something or is this a knowed bug of the current beta release ?
This is the source of my rewritted dialog function :

Code: Select all

/* @name dialog
* @description Opens a dialog box
*/
WYMeditor.editor.prototype.dialog = function( dialogType, bodyHtml ) {

   if(SBAjaxWrapper) {

      var sBodyHtml = "";
      var h = WYMeditor.Helper;
      var wym = this;
      var doc = SBAjaxWrapper.ajaxDialog; // This points to DOMElement use as jQuery UI Dialog box
      var selected = wym.selected();
      var sStamp = wym.uniqueStamp();

      switch( dialogType ) {

         case WYMeditor.DIALOG_LINK:
         sBodyHtml = this._options.dialogLinkHtml;
         break;

         case WYMeditor.DIALOG_IMAGE:
         sBodyHtml = this._options.dialogImageHtml;
         break;

         case WYMeditor.DIALOG_TABLE:
         sBodyHtml = this._options.dialogTableHtml;
         break;

         case WYMeditor.DIALOG_PASTE:
         sBodyHtml = this._options.dialogPasteHtml;
         break;

         case WYMeditor.PREVIEW:
         sBodyHtml = this._options.dialogPreviewHtml;
         break;

         default:
         sBodyHtml = bodyHtml;
      }

      //construct the dialog
      var dialogHtml = h.replaceAll(this._options.dialogHtml, WYMeditor.DIALOG_BODY, sBodyHtml);
      dialogHtml = jQuery(this.replaceStrings(dialogHtml));

      switch( dialogType ) {

         case WYMeditor.DIALOG_LINK:
         okFunction = function() {
            var sUrl = jQuery(wym._options.hrefSelector, doc).val();
            if(sUrl.length > 0) {
               wym._exec(WYMeditor.CREATE_LINK, sStamp);
               jQuery("a[@href=" + sStamp + "]", wym._doc.body)
                  .attr(WYMeditor.HREF, sUrl)
                  .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector, doc).val());
            }
         }
         break;

         case WYMeditor.DIALOG_IMAGE:
         okFunction = function() {
            var sUrl = jQuery(wym._options.srcSelector, SBAjaxWrapper.ajaxDialog).val();
            if(sUrl.length > 0) {
               wym._exec(WYMeditor.INSERT_IMAGE, sStamp);
               jQuery("img[@src=" + sStamp + "]", wym._doc.body)
                  .attr(WYMeditor.SRC, sUrl)
                  .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector, doc).val())
                  .attr(WYMeditor.ALT, jQuery(wym._options.altSelector, doc).val());
            }
         }
         break;

         case WYMeditor.DIALOG_TABLE:
         okFunction = function() {

            var iRows = jQuery(wym._options.rowsSelector, doc).val();
            var iCols = jQuery(wym._options.colsSelector, doc).val();

            if(iRows > 0 && iCols > 0) {

               var table = wym._doc.createElement(WYMeditor.TABLE);
               var newRow = null;
               var newCol = null;

               var sCaption = jQuery(wym._options.captionSelector, doc).val();

               //we create the caption
               var newCaption = table.createCaption();
               newCaption.innerHTML = sCaption;

               //we create the rows and cells
               for(x=0; x<iRows; x++) {
                  newRow = table.insertRow(x);
                  for(y=0; y<iCols; y++) {newRow.insertCell(y);}
               }

               //set the summary attr
               jQuery(table).attr('summary', jQuery(wym._options.summarySelector, doc).val());

               //append the table after the selected container
               var node = jQuery(wym.findUp(wym.container(), WYMeditor.MAIN_CONTAINERS)).get(0);
               if(!node || !node.parentNode) jQuery(wym._doc.body).append(table);
               else jQuery(node).after(table);
            }
         }
         break;

         case WYMeditor.DIALOG_PASTE:
         okFunction = function() {
            var sText = jQuery(wym._options.textSelector, doc).val();
            wym.paste(sText);
         }
         break;

         default:
         okFunction = function() {}
         break;
      }

      option = jQuery.extend(SBAjaxWrapper.option.dialogOption, {
         buttons:      {
            'Ok':   function() {
               okFunction();
               doc.dialog('close');
            }
         }
      } );

      doc.html(dialogHtml).dialog(option);

      // init dialog

      switch(dialogType) {

         case WYMeditor.DIALOG_LINK:
         //ensure that we select the link to populate the fields
         if(selected && selected.tagName && selected.tagName.toLowerCase != WYMeditor.A)
            selected = jQuery(selected).parentsOrSelf(WYMeditor.A);

         //fix MSIE selection if link image has been clicked
         if(!selected && wym._selected_image)
            selected = jQuery(wym._selected_image).parentsOrSelf(WYMeditor.A);
         break;

      }

      //pre-init functions
      if(jQuery.isFunction(wym._options.preInitDialog))
         wym._options.preInitDialog(wym, doc);

      //auto populate fields if selected container (e.g. A)
      if(selected) {
         jQuery(wym._options.hrefSelector, doc).val(jQuery(selected).attr(WYMeditor.HREF));
         jQuery(wym._options.srcSelector, doc).val(jQuery(selected).attr(WYMeditor.SRC));
         jQuery(wym._options.titleSelector, doc).val(jQuery(selected).attr(WYMeditor.TITLE));
         jQuery(wym._options.altSelector, doc).val(jQuery(selected).attr(WYMeditor.ALT));
      }

      //auto populate image fields if selected image
      if(wym._selected_image) {
         jQuery(wym._options.dialogImageSelector + " " + wym._options.srcSelector, doc)
            .val(jQuery(wym._selected_image).attr(WYMeditor.SRC));
         jQuery(wym._options.dialogImageSelector + " " + wym._options.titleSelector, doc)
            .val(jQuery(wym._selected_image).attr(WYMeditor.TITLE));
         jQuery(wym._options.dialogImageSelector + " " + wym._options.altSelector, doc)
            .val(jQuery(wym._selected_image).attr(WYMeditor.ALT));
      }

      jQuery(wym._options.dialogPreviewSelector + " " + wym._options.previewSelector, doc).html(wym.xhtml());

      //pre-init functions
      if(jQuery.isFunction(wym._options.postInitDialog))
         wym._options.postInitDialog(wym, doc);
   }
};

I can't produce complete source code with dialog initialisation and Co for the moment, because WYMEditor, jQuery and JQuery UI are tightly integrated one with the others and with my own CMS. If people are interested, I will extract sort of WYMEditor plugin for UI dialog when all will be fixed.

[Edit]
I've found this on Trac : http://trac.wymeditor.org/trac/ticket/20
It seems to be an old bug with firefox and link editing but what about images ?

[tarwin]

I'd love to see how you got the integration working. I'm a little confused about what your SBAjax thing actually is - hence I'm a little stuck. The main UI problem I have with WYMEditor (or the one that confuses clients the most) is the pop-up windows as they just turn up at random places on the screen.

I'm managed to integrate my hand-rolled image browser with the image editor but now stuck on this. Any help would be gladly appreciated.

[Folken Laëneck]

I'd love to see how you got the integration working.

Sorry if I'm a bit late, I don't check the WYMeditor forum in a regular way ...

As jQueryUI 1.7 finally release, I get back to work on integrating WYMeditor and jUI dialogs and now it works pretty well

Here's my code :

Code: Select all

var serveur_site = 'http://www.example.com/website/directory/'; // Your website root URL.

jQuery.fn.sbwymeditor = function(options) {

   // Preconigure underlying WYMEditor
   options = jQuery.extend( {

      // [...] Cutting many configuration options specific to WYMeditor's integration in my system

      dialogFeatures:                  "",

      dialogHtml:                  WYMeditor.DIALOG_BODY,

      dialogLinkHtml:                  "<div class='wym_dialog wym_dialog_link'>"
                              + "<form>"
                              + "<ul class='form-item clearfix'>"
                              + "<li class='formline clearfix required-line'>"
                              + "<label for='url'>{URL}</label>"
                              + "<input type='text' id='url' class='text' value='' />"
                              + "<input type='hidden' class='wym_dialog_type' value='" + WYMeditor.DIALOG_LINK + "' />"
                              + "</li>"
                              + "<li class='formline clearfix required-line'>"
                              + "<label for='title'>{Title}</label>"
                              + "<input type='text' id='title' class='text' value='' />"
                              + "</li>"
                              + "</ul>"
                              + "</form>"
                              + "</div>",

      dialogImageHtml:               "<div class='wym_dialog wym_dialog_image'>"
                              + "<form>"
                              + "<ul class='form-item clearfix'>"
                              + "<li class='formline clearfix required-line'>"
                              + "<label for='src'>{URL}</label>"
                              + "<input id='src' type='text' class='text' value='' />"
                              + "<input type='hidden' class='wym_dialog_type' value='" + WYMeditor.DIALOG_IMAGE + "' />"
                              + "</li>"
                              + "<li class='formline clearfix required-line'>"
                              + "<label for='alt'>{Alternative_Text}</label>"
                              + "<input id='alt' type='text' class='text' value='' />"
                              + "</li>"
                              + "<li class='formline clearfix'>"
                              + "<label for='title'>{Title}</label>"
                              + "<input id='title' type='text' class='text' value='' />"
                              + "</li>"
                              + "</ul>"
                              + "</form>"
                              + "</div>",

      dialogTableHtml:               "<div class='wym_dialog wym_dialog_table'>"
                              + "<form>"
                              + "<ul class='form-item clearfix'>"
                              + "<li class='formline clearfix'>"
                              + "<input type='hidden' class='wym_dialog_type' value='" + WYMeditor.DIALOG_TABLE + "' />"
                              + "<label for='caption'>{Caption}</label>"
                              + "<input id='caption' type='text' class='text' value='' />"
                              + "</li>"
                              + "<li class='formline clearfix'>"
                              + "<label for='rows'>{Number_Of_Rows}</label>"
                              + "<input id='rows' type='text' class='text' value='3' size='3' />"
                              + "</li>"
                              + "<li class='formline clearfix'>"
                              + "<label for='cols'>{Number_Of_Cols}</label>"
                              + "<input id='cols' type='text' class='text' value='2' size='3' />"
                              + "</li>"
                              + "</ul>"
                              + "</form>"
                              + "</div>",

      dialogPasteHtml:               "<div class='wym_dialog wym_dialog_paste'>"
                              + "<form>"
                              + "<ul class='form-item clearfix'>"
                              + "<li class='formline clearfix'>"
                              + "<textarea id='text' rows='10' cols='50'></textarea>"
                              + "<input type='hidden' class='wym_dialog_type' value='" + WYMeditor.DIALOG_PASTE + "' />"
                              + "</li>"
                              + "</ul>"
                              + "</form>"
                              + "</div>",

      dialogPreviewHtml:                "<div class='wym_dialog wym_dialog_preview'></div>",


      // [...] Other options you may need

   }, options);

   return this.wymeditor(options);
};


/********** Overriding methods of WYMEditor.editor **********/

/* @name dialog
* @description Opens a dialog box
*/
WYMeditor.editor.prototype.dialog = function( dialogType, bodyHtml ) {

   if(SBAjaxWrapper) {

      var h = WYMeditor.Helper;
      var wym = this;
      var doc = SBAjaxWrapper.ajaxDialog;
      var selected = wym.selected();
      var sStamp = wym.uniqueStamp();

      var sBodyHtml = '';
      var sdialogTitle = '';

      switch( dialogType ) {

         case WYMeditor.DIALOG_LINK:
         sdialogTitle = '{Link}';
         sBodyHtml = this._options.dialogLinkHtml;
         break;

         case WYMeditor.DIALOG_IMAGE:
         sdialogTitle = '{Image}';
         sBodyHtml = this._options.dialogImageHtml;
         break;

         case WYMeditor.DIALOG_TABLE:
         sdialogTitle = '{Table}';
         sBodyHtml = this._options.dialogTableHtml;
         break;

         case WYMeditor.DIALOG_PASTE:
         sdialogTitle = '{Paste_From_Word}';
         sBodyHtml = this._options.dialogPasteHtml;
         break;

         case WYMeditor.PREVIEW:
         sBodyHtml = this._options.dialogPreviewHtml;
         break;

         default:
         sBodyHtml = bodyHtml;
      }

      //construct the dialog
      var dialogHtml = h.replaceAll(this._options.dialogHtml, WYMeditor.DIALOG_BODY, sBodyHtml);
      dialogHtml = this.replaceStrings(dialogHtml);
      dialogTitle = this.replaceStrings(sdialogTitle);

      switch( dialogType ) {

         case WYMeditor.DIALOG_LINK:
         okFunction = function() {
            var sUrl = jQuery(wym._options.hrefSelector, doc).val();
            var sTitle = jQuery(wym._options.titleSelector, doc).val();

            wym._exec(WYMeditor.CREATE_LINK, sStamp);
               
            $('a', wym._doc.body).filter("a[href*='" + sStamp + "']")
               .attr(WYMeditor.HREF, sUrl)
               .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector, doc).val());

            return true;
         }
         break;

         case WYMeditor.DIALOG_IMAGE:
         okFunction = function() {
            var sUrl = jQuery(wym._options.srcSelector, doc).val();
            var sAlt = jQuery(wym._options.altSelector, doc).val();

            wym._exec(WYMeditor.INSERT_IMAGE, sStamp);
            
            $('img', wym._doc.body).filter("img[src*='" + sStamp + "']")
               .attr(WYMeditor.SRC, sUrl)
               .attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector, doc).val())
               .attr(WYMeditor.ALT, jQuery(wym._options.altSelector, doc).val());
            return true;
         }
         break;

         case WYMeditor.DIALOG_TABLE:
         okFunction = function() {

            var iRows = jQuery(wym._options.rowsSelector, doc).val();
            var iCols = jQuery(wym._options.colsSelector, doc).val();

            if(iRows > 0 && iCols > 0) {

               var table = wym._doc.createElement(WYMeditor.TABLE);
               var newRow = null;
               var newCol = null;

               var sCaption = jQuery(wym._options.captionSelector, doc).val();

               //we create the caption
               var newCaption = table.createCaption();
               newCaption.innerHTML = sCaption;

               //we create the rows and cells
               for(x=0; x<iRows; x++) {
                  newRow = table.insertRow(x);
                  for(y=0; y<iCols; y++) {newRow.insertCell(y);}
               }

               //set the summary attr
               jQuery(table).attr('summary', jQuery(wym._options.summarySelector, doc).val());

               //append the table after the selected container
               var node = jQuery(wym.findUp(wym.container(), WYMeditor.MAIN_CONTAINERS)).get(0);
               if(!node || !node.parentNode) jQuery(wym._doc.body).append(table);
               else jQuery(node).after(table);
            }

            return true;
         }
         break;

         case WYMeditor.DIALOG_PASTE:
         okFunction = function() {
            var sText = jQuery(wym._options.textSelector, doc).val();
            wym.paste(sText);
            return true;
         }
         break;

         default:
         okFunction = function() {
            return true;
         }
         break;
      }

      option = {
         buttons:   {
            'Ok':   function() {
               if(okFunction()) {
                  $(this).dialog('close');
               }
            }
         },
         title:      dialogTitle
      };

      SBAjaxWrapper.dialog(dialogHtml, option);
      doc = SBAjaxWrapper.ajaxDialog;
      jQuery('form', doc).submit( function() { if(okFunction()) { SBAjaxWrapper.ajaxDialog.dialog('close'); } return false; } );

      // init dialog

      switch(dialogType) {

         case WYMeditor.DIALOG_LINK:
         //ensure that we select the link to populate the fields
         if(selected && selected.tagName && selected.tagName.toLowerCase != WYMeditor.A)
            selected = jQuery(selected).parentsOrSelf(WYMeditor.A);

         //fix MSIE selection if link image has been clicked
         if(!selected && wym._selected_image)
            selected = jQuery(wym._selected_image).parentsOrSelf(WYMeditor.A);
         break;

      }

      //pre-init functions
      if(jQuery.isFunction(wym._options.preInitDialog))
         wym._options.preInitDialog(wym, doc);

      //auto populate fields if selected container (e.g. A)
      if(selected) {
         jQuery(wym._options.hrefSelector, doc).val(jQuery(selected).attr(WYMeditor.HREF));
         jQuery(wym._options.srcSelector, doc).val(jQuery(selected).attr(WYMeditor.SRC));
         jQuery(wym._options.titleSelector, doc).val(jQuery(selected).attr(WYMeditor.TITLE));
         jQuery(wym._options.altSelector, doc).val(jQuery(selected).attr(WYMeditor.ALT));
      }

      //auto populate image fields if selected image
      if(wym._selected_image) {
         jQuery(wym._options.dialogImageSelector + " " + wym._options.srcSelector, doc)
            .val(jQuery(wym._selected_image).attr(WYMeditor.SRC));
         jQuery(wym._options.dialogImageSelector + " " + wym._options.titleSelector, doc)
            .val(jQuery(wym._selected_image).attr(WYMeditor.TITLE));
         jQuery(wym._options.dialogImageSelector + " " + wym._options.altSelector, doc)
            .val(jQuery(wym._selected_image).attr(WYMeditor.ALT));
      }

      jQuery(wym._options.dialogPreviewSelector, doc).html(wym.xhtml().replace(/=\"media/, '="' + serveur_site + 'media/'));

      //pre-init functions
      if(jQuery.isFunction(wym._options.postInitDialog))
         wym._options.postInitDialog(wym, doc);
   }
};

AjaxWrapper = function(p_debug, p_option) {

   p_option = p_option || {};

   this.option   =   jQuery.extend({
      dialogOption:      {
                  modal:      false,
                  width:      600,
                  minWidth:      600,
                  maxWidth:   950,
                  minHeight:   300
               },
      dialogId:         'ajaxDialog'
   }, p_option);

   this.instances = [];
   this.ajaxDialog = null;

   this.init();
}

AjaxWrapper.prototype.init = function() {
   // Création de la boite de dialogue ajaxDialog
   if(this.ajaxDialog) {
      var content = $('#ajaxDialog').html();
      $('#ajaxDialog').dialog('destroy').remove();
      this.ajaxDialog = null;
   }
   $('body').append('<div id="ajaxDialog">' + (content != undefined ? content : '&nbsp;') + '</div>');
   this.ajaxDialog = $('#ajaxDialog');
}

AjaxWrapper.prototype.dialog = function(message, option) {

   this.initDialog();

   if(message != '') {
      this.ajaxDialog.html(message);
   }
   option = jQuery.extend({}, this.option.dialogOption, option);
   this.ajaxDialog.dialog(option);
}

if(!SBAjaxWrapper) var SBAjaxWrapper = null;

It may seems a bit strange, but it's just a quick extract from a more complicated codebase, as I made many other additions on WYMeditor such as a file browser, filepath manipulations and error detections in dialogs (rewriting the dialog method opens many possibilities, it will be interesting to provide more hooks for plugins in this part of the code), etc.
All of these improvements are tightly integrated one with the others and with the system they lived in, so they can't really be redistributed easily.

[wymmy]

Ah good. Someone is working on improving WYMeditor from the popup dialog standpoint. I completely understand why that approach was taken initially - probably offered the easiest way to allow plugins to hook in and add additional features to the dialogs. May I make a minor suggestion though: Try to avoid creating dependencies on jQuery UI for this feature. jQuery UI is heavy and sluggish. Take a look at NicEdit. Their "popups" seem to be fairly responsive/quick.

[wymmy]

I've decided this is not very good integration with jQuery UI for overriding the dialog method. It also isn't very "future-proof". Well, nothing truly is, but this code is likely to break on the next release of WYMeditor - meaning you will constantly be making changes to your patch.

Direct integration into the main WYMeditor core OR an official plugin would be better.

[wymmy]

This idea just came to me and I like it WAY better: Instead of integrating dialogs of any sort, why not embed the contents of the dialog and its options into the editor itself? The "Toggle HTML" button already does something like this. When you click, say, the "hyperlink" icon, it shows the form above the editor just like the Toggle HTML button does (only it shows a form instead of code). This approach eliminates a whole slew of user interface and browser issues AND eliminates the dialog issue altogether (plus no dependency on jQuery UI to function). You could even call it a feature: No dialogs!

[wymmy]

Trac ticket opened for my latest idea:

http://trac.wymeditor.org/trac/ticket/194

Let's see what the developers have to say about this. It will be a bit of work to change the dialog code. I'm hoping they see the benefits of changing the current approach.

[christracy123]

Thanks wymmy for this codes. Thanks for this link.

[Kloyd Niel]

Hello Guys,

Thanks for the information that i read,
BTW im a newly one in this site but i learned lot of ideas about this site.
Thanks a lot for being part of this site. God Bless.



how to treat depression