Eazy az 1-2-3

[eddy_declercq]

In an earlier From the Grumpy Old Man: Droopy kind of love, “The Grumpy Old Man” found the lack of a decent web log editor with the new release of S(D)N to be a missed chance. He said that a future web log would prove that an implementation of a WYSYWYG editor is really simple, especially when the editor is already available at S(D)N.
Well he’s quite right concerning the latter. The editor used in the S(D)N Wiki uses a WYSYWYG editor, which can run independently from that Wiki. In fact this editor, called TinyMCE, is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL that can be downloaded at several locations.

Once downloaded and put on your server, you’ve already achieved 60% of the work to be done. I will explain the rest of the 40% with the S(D)N web log system as an example.

The first thing is to indicate where the editor resides on your server

 
Now we need to initialise the editor

 
tinyMCE.init({ 
The editor needs to be applied on the textareas
        mode : "textareas",
 
But we don’t need to apply them on all the textareas. Therefore we say that we want the editor to only apply to textareas with a certain style
        editor_selector : "mceEditor",
 
Don’t forget to apply the style on the textarea itself
 
There are 2 pre installed themes: the simple and the advanced
        theme : "advanced",
 
We need some extra goodies like spell checking (works with PHP spell check, Google web services) and context menus
        plugins : "table,spellchecker,searchreplace,contextmenu",
 
The editor may be resized
theme_advanced_resizing : true,
 
Therefore we need also the status bar
        theme_advanced_statusbar_location : "bottom",
 
An editor is nothing without a toolbar
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
 
Now we need to define what needs be shown on the toolbar and thus allowed by the end user. I used this SDN: Weblogs and Formatting! as a base for the buttons. There are different ways to put the buttons. I just indicate the buttons I need, spread over 3 lines
            theme_advanced_buttons1 : "bold,italic,formatselect,sub,sup",
            theme_advanced_buttons2 : "hr,separator,table,separator,justifycenter,separator,bullist,numlist,separator,link,unlink,anchor,separator,image",
            theme_advanced_buttons3 : "undo,redo,separator,cleanup,removeformat,separator,spellchecker"
 
To conclude the full script:
The result can be seen on my usual place.
Important. This is NOT the real web log editing system, but a private initiative in order to demonstrate things. Therefore, I’ve omitted the submit buttons.
But that doesn’t imply that this couldn’t be implemented to make our S(D)N web log contributors’ life a lot more easier. It is - as “the Grumpy Old Man” indicates – only 15 minutes of work to implement things.