Home > firefox, javascript, workarounds, wysiwyg editors > nicEdit Firefox center and right align bug patch.

nicEdit Firefox center and right align bug patch.

If you are using nicEdit on content editable areas instead of the iFrame method, then you may have run across the FireFox bug that prevents you from changing the text alignment on the first line of a content editable element. 

As a work around, change the nicCommand method in nicEdit.js (Line 610 or so), to the below. This code catches the error that firefox throws, inserts a temporary div immediately before the selection, repeats the call that failed (the bug only causes the alignment to fail when it is the very first element in the content editable), and then removes the temporary div.

nicCommand : function(cmd, args) {
        if ((cmd == 'justifyright') || (cmd == 'justifyleft') || (cmd ==
        'justifycenter') || (cmd == 'justifyfull')) {
              try {
                 document.execCommand(cmd, false, null);
              }
              catch (e) {
                 //special case for Mozilla Bug #442186
                 if (e && e.result == 2147500037) {
                    //probably firefox bug 442186 - workaround
                    var range = window.getSelection().getRangeAt(0);
                    var dummy = document.createElement('div');

                     //To restore the range after collapsing for triple click bug...
                     var restoreSelection = false;                     
                    dummy.style.height="1px;";

                    //find node with contentEditable


                    //Triple Click selection Problem in mozilla, the selection contains the content editable div, which creates a problem for some reason, so we collapse the selection to the end, and then re-select everything...
                    if(range.startContainer.contentEditable == 'true'){
                        window.getSelection().collapseToEnd();
                        restoreSelection = true;
                    }

                    var ceNode = window.getSelection().getRangeAt(0).startContainer;

                    while (ceNode && ceNode.contentEditable != 'true')
                       ceNode = ceNode.parentNode;

                    if (!ceNode) throw 'Selected node is not editable!';

                    ceNode.insertBefore(dummy, ceNode.childNodes[0]);                    
                    document.execCommand(cmd, false, null);
                    dummy.parentNode.removeChild(dummy);

                     //RestoreSelection if we changed it...
                     if(restoreSelection){                        
                        window.getSelection().addRange(range);
                     }
                 } else if (console && console.log) console.log(e);
              }
           } else {
              document.execCommand(cmd, false, args);
      }
    }
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  1. yuss
    October 15th, 2010 at 17:19 | #1

    tnkx
    but i cant enable nicEdit to work in firefox,just in IE
    i try
    if ((B.contentEditable || !!window.opera) && navigator.userAgent.indexOf(“Firefox/3″) == -1)
    still dont work.

  2. January 4th, 2011 at 04:00 | #2

    Thanks, it’s work !!!

  1. February 20th, 2011 at 00:58 | #1