The Lab of the weblog Central Scrutinizer

Il post in italiano, non di minor prolissità, si trova qui.
The experiment that I’m going to introduce you today is of ’syllogistic’ type, and his name is WIP - WYSIWYG in place, in other words an AJAX edit-in-place with the use of a WYSIWYG editor.
This is the demo, and this is the explanation of the obscure phrase above:

• What are WYSIWYG, Edit-in-place and WIP?
• How can I use it?
• How does it works?
• Where I can download it?

What are WYSIWYG, Edit-in-place and WIP?

WYSIWYG (pronunciation: “wizzy-wig”) is the acronym of “What You See Is What You Get” and correspond to give to the user the exact perception, during the creation of a document, of what will be printed on screen or on paper. (Examples of WYSIWYGs are text editor like Word and PowerPoint or graphics program like Photoshop or Flash.)
In the web the need to create and modify in an easy way, without any knowledge, an HTML code bring to life the Rich TextArea, some textareas surmounted by a bar with some buttons that make them similar to a ordinary editor. (Writing a text, selecting it and clicking one of the buttons is possible to insert the text in a particular HTML tag: if for example you want that a text portion written in the textarea would be in bold, is necessary to select the text and click on the ‘B’ button, that will insert the text between two <strong> tags).
WYSIWYGs never been well accepted under the point of view of web standards, because accused to not well formed code, not allowing the separation between structure and presentation (an example of this is the tag <FONT face=Arial bgcolor=#000000>) or to run only with Internet Explorer.
In the last years are born, so, some WYSIWYG - a few of these open-source - that well repaired to the errors of the precursors: among them XINHA (acronym of ‘XINHA is not HTMLArea’, being the son of the excellent HTMLArea, which developing - blocked some years ago - is powered now by an opensource community), TinyMCE (the Wordpress default editor) and FCK Editor.
One year ago I also suggested WYM, a “What You See Is What You Mean” editor, that has as goal to guide the user in the structuring of the document skipping the visual layout. Under my point of view this is a instrument I would see better related to us working with code than a newbie used to a Word-like editing; the ideal could be the customization of the editor in the way that a user is forced to exclusively use the tags related to the structure of a page, creating so a valid (I’m speaking about XHTML) and well formed code, deleting for example the modifying of the size and the font family leaving their definition, as usual, to CSS.
For possible changes XINHA, TinyMCE and FCK allow to switch to a “code mode”, useful for example to add a span or the id to a paragraph.

The Edit-in-place (or in-place editing), instead, is a javascript technique that allows to make a text directly editable in the page where it’s inserted: clicking on a particular text this is inserted in a textarea of the same size, and possible modifications are send to server after the click of a ’saving’ button. Some implementations: the patriarch Editable Content by Tim Taylor, Edit text by Peter Paul Kock, Script.aculo.us’s Ajax in place editor, AJAX Edit in place by Joseph Scott.
The EIP, so, is useful for simple ‘on the fly’ changes that avoid the passage trought the classic admin section.

The WIP born, as I tell you in the first paragraph, from a reasoning similar to syllogism.
The action that describe the editing-in-place could be probably is:

Modify any text with a <textarea>

The editor HTMLArea had as official slogan:

Turn any <textarea> in a WYSIWYG Editor

So is possibile:

Modify any text with a WYSIWYG Editor

Top

How can I use it?

The WIP is composed by an unique javascript file that allows to obtain a edit-in-place on the text in a html using a WYSIWYG editor and to communicate the changes to a server.
The editor where I tested the script is XINHA, so the first thing you must to do is to download it from this page and rename the folder “xinha-xxx” in “xinha”.
The example package wip.zip (downloadable from here), contains the script wipxinha.js, HTML+CSS for example and a file send.php that will simulate the server side.
All the file must be placed on a webserver, and the “xinha” folder must be inserted inside the “wip” folder (so, if you test on your PC the file HTML must be at the address “http://localhost/wip/wipxinha.html”, while the editor at the address “http://localhost/wip/xinha/”).

The HTML wipxinha.html contains the following javascript code:

 <script type="text/javascript">
     _editor_url  = "xinha";
     _editor_lang = "en";
     _editor_skin = "green-look";
     </script>
     <script type="text/javascript" src="xinha/htmlarea.js"></script>
     <script type="text/javascript" src="wipxinha.js"></script>

First instruction indicate the path of the editor, the second the default language, the third the toolbar style; the last two instead recall the main script of the editor and the WIP.
Inside the HTML could be modified all the divs that have as class “edit”: at the mouse over the div will change the colour, while with the double click will appear an editor with the same size of the div. Via a click on the button “save” the text recover the original format with the ch-ch-changes made, while with a click on the button “cancel” obviously the changes will not be saved.

Top

How does it works?

The javascript object WIP contains seven functions: two of initialization, one for the inserting of the text in a textarea, one for the transformation from textarea to editor, two for the sending of the data to the server throught XMLHttpRequest, one of reset.

Make a portion of text editable
As I said before, a portion of text is editable only if it’s inserted in a div with default class: the default name of the class is ‘edit’, but it could be modify thought the global variable editableClass. The div be able to contain other elements like p, span or others divs (you can think about the several <div class="post"> in the default theme of Wordpress).

   <div class="edit">
     <p id="test">Paragraph to edit</p>
     <p id="test2">Second paragraph to edit</p>
   </div>

First function will select all these div present in the page:

init : function() {
    var editElements = [];
    var els = document.getElementsByTagName('*');
    var elsLen = els.length;
    var patternEdit = new RegExp("(^|\\s)" + wip.editableClass + "(\\s|$)");
    for (i = 0, j = 0; i < elsLen; i++) {
	if ( patternEdit.test(els[i].className) ) {
	editElements[j++] = els[i];
    }
    }
    for(var i = 0; editel = editElements[i]; i++) {
	wip.prepare(editel);
    }
    } ,

or rather a modified version of a classic getElementsByClass.
For every element will be called a function prepare: at the event mouseover the div will be highlight with a colour modifiable via the variable hoverColor; at the mouseout the div will recover the original colour (previously saved using the external function getCSSProp); at the double click, instead, will be called the function that will create the textarea.

prepare : function(editel) {
	editel.onmouseover = function() {
           bg = getCSSProp(this, "background-color");
	   this.style.backgroundColor = wip.hoverColor;
	}
	editel.onmouseout = function() {
           this.style.backgroundColor = bg;
	}
		editel.ondblclick = function() {wip.edit(this);}
	},

In the example one you can find a demo with the function see above, in the example two, instead, a fade effect (similar to the last scrip.aculo.us’s EIP demo) with the use of the Fade Anything Technique.

Insert the text in a textarea
The function edit(elem), that I don’t quote again but you can find in the third example, will save the selected div in a variable text, storing the properties associated to the text throught the function getCSSProp.
Using the DOM it will substitute the div with a form that will have an id with the value: 1) the id del div if the id was present; 2) a Unix timestamp with the date at the instant of the double click.
Inside the form will be created: a textarea with inside the text saved before, a button “Save” which click will call the function send(id, text) and a button “Cancel” related, instead, to the function cancel(id, text).
The function send will send to the server, simulated by send.php, the content of the modified text: in this example the instruction inside the file return only the text send, so all the changes will be lost at the refresh of the page; usually, instead, a file of this type (or a file related to it) must also have the task to write the changes on the database.

Replace the textarea with the WYSIWYG editor
XINHA allows to indicate an external file (in this case throught a couple of functions inserted in our javascript) which textareas will be substitued by the editors, and customize them with some instructions described in this page.
The array xinha_editors will contain the names of the textareas that could be replaced with XINHA, so the last two instruction of the edit function:

       wip.xinha_editors.push(parid);
       this.startXINHA();

will insert the array name, equal to the id of the form, in the textarea created by the function edit, showing the editor.

In the function startXINHA() will be set the sizes of the editor, equal to the textarea ones, and selected in two arrays the buttons (array cinha_config.toolbar) and the plugins[1] to insert in the toolbar.
As I was saying before, I inserted only the buttons that modify the structure of the HTML (bold, italic, ul etc.) and a plugin that insert a button for the char map.

The script has been tested on Firefox and Internet Explorer, while on Opera the editor XINHA is not supported yet.
I’d like to thanks as usual magister Skid “human debugger” X, and I invite you to suggest possible bugs [2]), mainly about the (for me) obscure Safari.
In a short time I will try something similar with TinyMCE, that allows to use a configuration script, while I’m still taking a look to FCK e WYM.

Top

Where I can download all?

• WIP [.js - 10 kB]
• WIP + examples [.zip -15 kB]
• Latest XINHA[.zip/.tar.gz - ~1.3 MB]

Top

[1] There are several plugins available, more or less useful according to the needs. One of these, InsertSmiley, allows to insert some hundreds of emoticons; I’m not a big reader of forums, but I have never seen an emoticon that represent in a so tragic way the couple life:

[2] After all, I resorted to a Jason Kottke rule:

The markup is not as semantically clean as it could be, but one of the important lessons I’ve learned over the years is that a 90% product today is better than a 99% product three months from now.

This entry was posted on Saturday, April 7th, 2007 at 2:50 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or a (anyone still use them?) trackback from your site.