Archive

Archive for the ‘wysiwyg editors’ Category

Awesome Prototyping Tool!

October 25th, 2010 No comments

Check out this AWESOME free prototyping tool. Pencil Project.  (It’s a Firefox Plugin / XUL Application)

It let’s you mock up fully functional websites without writing any html code.  Then, you can export it as html, and use it as a starting point for a better mockup.  Or export all the pages to png’s in one shot, and use those as a starting point in Adobe Illustrator, or your design tool of choice.

It’s great for useability testing.  Mockup your ideas.  Put them in front of customers / users, re-prototype, and continue until you get it as good as possible, and meeting your cash cow customers’ needs.  THEN make it look good.

http://pencil.evolus.vn/en-US/Home.aspx

nicEdit Firefox center and right align bug patch.

July 28th, 2010 2 comments

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);
      }
    }