widgEditor: A simple, standards-compliant WYSIWYG HTML editor
27 January 2005
HTMLArea is probably the most well rounded solution, but it's far too complex for most of my applications – its code isn't extremely extensible, the interface isn't customisable, and inherent with its abundance of editing freedom is the risk that an unwise author will produce a horrid looking mash of <font> tags.
Kevin Roth's Rich Text Editor brings in a bit more simplicity, but the source code is again pretty messy, and the ease with which it is applied to a page isn't great.
So, in steps my contender: widgEditor.
I've kept it to a minimal functionality set – the sort of styling that you'd require for a weblog or CMS. However, the object oriented code is easily extensible should you be adventurous enough to want to add on extra doodads.
You'll see that I'm now using widgEditor for my own comments. I figure that's the best place to road test it. I'm sure that the code will be hammered over the next few weeks, and found a little wanting, so updates will be forthcoming as bugs appear.
I've redone the submission parsing, so now there shouldn't be any problems with overlapping tags, orphaned text, etc. How? I removed some dodgy regular expressions and used full DOM checking to ensure that elements were where they're meant to be.
You should also be able to view the HTML source now. (Don't make untested code modifications at 4AM ... or ever.)
Problems with the toolbar coming up and nothing else in Safari shall be fixed; I have a rough idea of what's going on, but need some solid AppleTime. However, when it's done you still won't get the editor – plain textarea for you, until Steve Jobs does something about it.
Textareas with multiple classes (i.e. other than "widgEditor") are now found and converted.
Mozilla's <span> formatting for italic and bold are now converted to <em> and <strong> respectively when the HTML source is viewed and when the form is submitted.
Multiple textareas on the one page are now supported. Some trickery was required because of some weirdness with the DOM and quickly replacing several elements on the page, but it does work!
Fixed disappearing content bug when switching between WYSIWYG and HTML Source views.
Toolbar items now give appropriate feedback when cursor is placed in a styled area. (i.e. indicates whether current selection is bold, italic, list, etc.)
Removed whitespace at beginning and end of HTML Source. (Mozilla previously kept adding tabs)
Improved text styling in Mozilla. Previously it could not remove <strong> or <em> tags. This was fixed by using spans whilel in WYSIWYG mode, but seamlessly converting them to semantic tags for all other purposes, including final output.
Hyperlinks can now be removed by clicking the "Hyperlink" toolbar item when a hyperlink is selected.
The addition of entries to the browser's history is not fixable. This is a side effect of using iframes (necessary for Mozilla), and can therefore not be counteracted.
To be added: insert images, clean pasted content.
Fixed Safari no show bug. Safari hasn't implemented HTML editing, but they have the hooks to do so, therefore detection of HTML editing returns true. Had to hack around this.
Insertion of images has been added. If you ask me, putting images inline with text looks crap, but each to their own.
When content is pasted via ctrl-v it can now be cleaned. By default, widgEditor asks you whether you wish to clean the content, but by changing the widgAutoClean variable in the configuration to equal true, cleaning will be done automatically.
The cleaning function checks for unaccepted elements i.e. anything but #text, <a>, <em>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <img>, <li>, <ol>, <p>, <strong>, <ul>, and replaces block elements with paragraphs, replaces bold and italic with their semantics and removes other inline elements. Unaccepted attributes are also removed i.e. anything but alt, href, src and title.
Some additional Microsoft Word cruft is also removed, to enable clean pasting from that application.
There are no further planned feature add-ons for widgEditor. It will now only be updated for bug fixes.
Did some major tightening of the paste cleaning. Wasn't cleaning complex HTML thoroughly, now does so. Pasting from Word into Internet Explorer now removes all Word CrapTags™.
<br>s right before the end of block elements are removed.
Pasted bold and italic styles weren't editable in Mozilla. Now are.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout