Web Programming Notes

WYMeditor

In an effort to find a decent  web-based editor that produces valid XHTML, I stumbled across WYMeditor.  From the outset, it seems quite good offering an interface that is not completely awful to look at whilst at the same time preventing the user from messing up the HTML.

Extending WYMeditor

Compared to many web-based editors though, the features offered are fairly minimal, which I suppose is in keeping with the project’s general philosophy.  I decided to see how easy it was to extend.  In this case, I wanted to created a “symbol selector” to insert characters like pound and euro.  Not rocket science, but still a useful feature.

Requirements:

1. An additional button that shows the symbol selector
2. When the user clicks a symbol, the character is inserted into the document and the symbol selector is hidden
3. Clicking again on the button hides the selector 

I wanted to use a popup window dialog to match the existing link and image dialogs, however these seem to be hard-coded so I bailed on that idea. Instead I opted for a hidden DIV with each symbol enclosed in a SPAN.  The extensibility offered through plugins seems good, but with only one example, I couldn’t really tell if what I wanted to do fit the ‘plugin’ pattern.  There is an example for creating a button however, so I decided to use that.

jQuery

On closer inspection of the example code, I found that WYMeditor heavily relies on a JavaScript library called JQuery.  Almost like another language to begin with, I eventually found it to be intuitive to use and quite quick to implement.  Essentially it allows you to quickly resolve references to DOM nodes, then apply custom events and manipulate properties in a convienient way.

The Symbol Selector

See the Symbol Selector Demo

I modified the button example and replaced the ‘postInit’ function with the following:

postInit: function(wym) {

    //construct the button’s html
    var html = ”<li class=’wym_tools_newbutton’>”
             + ”<a name=’NewButton’ href=’#'”
             + ” style=’background-image:”
             + ” url(../wymeditor/skins/default/icons.png)’>”
             + ”Do something”
             + ”</a></li>
    
    //construct the symbol selector’s html
    html += ”<div class=’symbolSelector’ style=’position: absolute;display: none;width: 100px;background:white;border:1px solid black;’><span>£</span><span>€</span></div>”;

    //add the button to the tools box
    jQuery(wym._box).find(wym._options.toolsSelector + wym._options.toolsListSelector).append(html);

    //Make the button show/hide the symbol selector
    jQuery(wym._box).find(’li.wym_tools_newbutton a’).click(function() {
        jQuery(wym._box).find(’div.symbolSelector’).toggle();
        return(false);
    });

    //Paste symbol into document when symbol clicked, then hide symbol selector
    jQuery(wym._box).find(’div.symbolSelector span’).click(function() {
        wym.paste(jQuery(this).text());
        jQuery(wym._box).find(’div.symbolSelector’).hide(); 
    });
}