WYMeditor forum

WYMeditor is a web-based WYSIWYM XHTML editor

Skip to content

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

Wymeditor thickbox dialogs

Support forum for WYMeditor.
Post a reply

Wymeditor thickbox dialogs

Postby roundash on Mon Nov 10, 2008 5:54 pm

I have successfully managed to implement dialogs using Thickbox instead of pop up windows but have a problem with MSIE.

All works fine with Firefox but with MSIE I guess the selection is lost when the dialog is displayed so although the insert image and insert link functions are triggered, nothing gets inserted into the text.

One of the threads in the forums indicated that you had found a way to store the selection. Is this easy to do or am I wasting my time?

I'm using version 0.5 by the way and have added the insert at caret function which is great thanks and incidentally works with a thickbox dialog in MSIE too.

Any ideas?

I'd be more than happy to post the code if I can get it to work across all browsers.

Thanks as always for the good work.
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top

Re: Wymeditor thickbox dialogs

Postby jfh on Mon Nov 17, 2008 9:21 pm

roundash wrote:I have successfully managed to implement dialogs using Thickbox instead of pop up windows but have a problem with MSIE.
All works fine with Firefox but with MSIE I guess the selection is lost when the dialog is displayed so although the insert image and insert link functions are triggered, nothing gets inserted into the text.

Yes, this is a common issue in MSIE - the selection is lost if the iframe loses the focus, except when you use popups ;)

roundash wrote:One of the threads in the forums indicated that you had found a way to store the selection. Is this easy to do or am I wasting my time?

It's easy and cross-browser. There's an implementation example here.

roundash wrote:I'm using version 0.5 by the way and have added the insert at caret function which is great thanks and incidentally works with a thickbox dialog in MSIE too.

Cool. FYI, you can also 'svn checkout' the trunk, which contains insert(), wrap() and unwrap().

Please feel free to submit your Thickbox implementation on the Trac. Thanks!
User avatar
jfh
Site Admin
 
Posts: 370
Joined: Sat Sep 23, 2006 8:43 pm
Location: Belgium
Top

Re: Wymeditor thickbox dialogs

Postby roundash on Wed Nov 19, 2008 7:18 pm

Thanks for your reply and code.

I have however found another way of doing this that seems to work and that is to add the line below to the INIT_DIALOG function (just before the call to wym._exec)

wym._doc.body.focus();

This works fine in IE6
roundash
 
Posts: 24
Joined: Wed May 30, 2007 4:13 pm
Location: Devon, UK
Top

Re: Wymeditor thickbox dialogs

Postby jfh on Wed Nov 19, 2008 9:43 pm

Thanks for the feedback - I'll check this out.
User avatar
jfh
Site Admin
 
Posts: 370
Joined: Sat Sep 23, 2006 8:43 pm
Location: Belgium
Top

Re: Wymeditor thickbox dialogs

Postby avallo on Fri Dec 05, 2008 6:34 pm

I have successfully managed to implement dialogs using Thickbox instead of pop up windows but have a problem with MSIE.


How did you do this?
I have been trying for some time now to get this to work with jQuery UI Dialogs but have not had success.

Is it possible for you to post an example, this would help me tremendously.

Thanks.
avallo
 
Posts: 11
Joined: Fri Sep 21, 2007 3:47 pm
Top

Re: Wymeditor thickbox dialogs

Postby avallo on Sat Dec 06, 2008 12:26 am

Nevermind I figured it out,
just had to tweak the , "dialog" and "INIT_DIALOG" functions
and change "dialogHtml" option to just the body content. "WYMeditor.DIALOG_BODY" so there is just content.
you will also have to remove the body element from each one of the dialog types and move the class to the form
Code: Select all

// from this
    dialogLinkHtml:  "<body class='wym_dialog wym_dialog_link'"
               + " onload='WYMeditor.INIT_DIALOG(" + WYMeditor.INDEX + ")'"
               + ">"
               + "<form>"
      // your form fields here
               + "</form>"
               + "</body>",

// to this
    dialogLinkHtml:  "<form class='wym_dialog wym_dialog_link'">"
      // your form fields here
               + "</form>"
               + "</body>",

// for each one




i have some custom functions that make the dialogs for me so some of this you will have to tweak.
Code: Select all
WYMeditor.editor.prototype.dialog = function(sType) {
    var sBodyHtml = "";
   
    switch(sType) {

      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;
    }
    //construct the dialog
    var dialogHtml = this._options.dialogHtml;
    dialogHtml = dialogHtml
      .replaceAll(WYMeditor.BASE_PATH, this._options.basePath)
      .replaceAll(WYMeditor.CSS_PATH, this._options.skinPath
        + WYMeditor.SKINS_DEFAULT_CSS)
      .replaceAll(WYMeditor.WYM_PATH, this._options.wymPath)
      .replaceAll(WYMeditor.JQUERY_PATH, this._options.jQueryPath)
      .replaceAll(WYMeditor.DIALOG_TITLE, this.encloseString(sType))
      .replaceAll(WYMeditor.DIALOG_BODY, sBodyHtml)
      .replaceAll(WYMeditor.INDEX, this._index);
     
    dialogHtml = this.replaceStrings(dialogHtml);
   var wym = this;
    // then call your dialog here with "dialogHtml" as the content
    // when the dialog loads then do:
   var dialog = $("YOUR_DIALOG_HERE") //a reference to your dialog
   WYMeditor.INIT_DIALOG(wym,dialog);
};


i passed the dialog reference through the function but you might do it differently depending on your setup
Code: Select all
WYMeditor.INIT_DIALOG = function(wym,dialog) {
   var index = wym._index; // dont think you need this
   var selected = wym.selected();
   var dialogType = jQuery(wym._options.dialogTypeSelector).val();
   var sStamp = wym.uniqueStamp();
   var ewin   = 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,window);

   
   //auto populate fields if selected container (e.g. A)
   if(selected) {
      jQuery(wym._options.hrefSelector).val(jQuery(selected).attr(WYMeditor.HREF));
      jQuery(wym._options.srcSelector).val(jQuery(selected).attr(WYMeditor.SRC));
      jQuery(wym._options.titleSelector).val(jQuery(selected).attr(WYMeditor.TITLE));
      jQuery(wym._options.altSelector).val(jQuery(selected).attr(WYMeditor.ALT));
   }
   
   //auto populate image fields if selected image
   if(wym._selected_image) {
      jQuery(wym._options.dialogImageSelector + " " + wym._options.srcSelector)
      .val(jQuery(wym._selected_image).attr(WYMeditor.SRC));
      jQuery(wym._options.dialogImageSelector + " " + wym._options.titleSelector)
      .val(jQuery(wym._selected_image).attr(WYMeditor.TITLE));
      jQuery(wym._options.dialogImageSelector + " " + wym._options.altSelector)
      .val(jQuery(wym._selected_image).attr(WYMeditor.ALT));
   }
   var closeBut = ewin.find(".ui-dialog-titlebar-close");
   
   jQuery(wym._options.dialogLinkSelector + " "
   + wym._options.submitSelector).click(function() {
   
     var sUrl = jQuery(wym._options.hrefSelector).val();
     if(sUrl.length > 0) {
      wym._exec(WYMeditor.CREATE_LINK, sStamp);
      //don't use jQuery.find() see #JQ1143
      //var link = jQuery(wym._doc.body).find("a[@href=" + sStamp + "]");
      var link = null;
      var nodes = wym._doc.body.getElementsByTagName(WYMeditor.A);
      for(var i=0; i < nodes.length; i++) {
         if(jQuery(nodes[i]).attr(WYMeditor.HREF) == sStamp) {
            link = jQuery(nodes[i]);
            break;
         }
      }
      if(link) {
         link.attr(WYMeditor.HREF, sUrl);
         link.attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector).val());
      }
     }
     // fire a click event on the dialogs close button
     closeBut.click();
   });

   jQuery(wym._options.dialogImageSelector + " "
   + wym._options.submitSelector).click(function() {
   
     var sUrl = jQuery(wym._options.srcSelector).val();
     if(sUrl.length > 0) {
      wym._exec(WYMeditor.INSERT_IMAGE, sStamp);
      //don't use jQuery.find() see #JQ1143
      //var image = jQuery(wym._doc.body).find("img[@src=" + sStamp + "]");
      var image = null;
      var nodes = wym._doc.body.getElementsByTagName(WYMeditor.IMG);
      for(var i=0; i < nodes.length; i++) {
         if(jQuery(nodes[i]).attr(WYMeditor.SRC) == sStamp) {
            image = jQuery(nodes[i]);
            break;
         }
      }
      if(image) {
         image.attr(WYMeditor.SRC, sUrl);
         image.attr(WYMeditor.TITLE, jQuery(wym._options.titleSelector).val());
         image.attr(WYMeditor.ALT, jQuery(wym._options.altSelector).val());
      }
     }
     // fire a click event on the dialogs close button
     closeBut.click();
   });
   
   jQuery(wym._options.dialogTableSelector + " "
   + wym._options.submitSelector).click(function() {
   
     var iRows = jQuery(wym._options.rowsSelector).val();
     var iCols = jQuery(wym._options.colsSelector).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).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);}
         }
   
      //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);
     }
     // fire a click event on the dialogs close button
     closeBut.click();
   });
   
   jQuery(wym._options.dialogPasteSelector + " "
   + wym._options.submitSelector).click(function() {
   
     var sText = jQuery(wym._options.textSelector).val();
     wym.paste(sText);
     // fire a click event on the dialogs close button
     closeBut.click();
   });
   
   jQuery(wym._options.dialogPreviewSelector + " "
   + wym._options.previewSelector)
   .html(wym.xhtml());
   
   //cancel button
   jQuery(wym._options.cancelSelector).mousedown(function() {
     // fire a click event on the dialogs close button
     closeBut.click();
   });
   
  //post-init functions
  if(jQuery.isFunction(wym._options.postInitDialog))
    wym._options.postInitDialog(wym,window);
};


clear as mud?
avallo
 
Posts: 11
Joined: Fri Sep 21, 2007 3:47 pm
Top

Re: Wymeditor thickbox dialogs

Postby mr_lundis on Tue Dec 09, 2008 9:39 pm

It's always nice to see people giving back to the community!

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
Top
Post a reply

Return to Support

Who is online

Users browsing this forum: No registered users and 1 guest

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group