Skip to Content
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.

 

 

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

      1. Mark Yolton
        Yes, a new WYSIWYG blog editor is coming… 

        If we keep up this pace of innovation on SDN (and BPX), Eddy won’t be so Grumpy anymore and will need a new nickname. 

        Suggestions welcome 🙂

        Seriously: Thank you Eddy (Grumpy) for keeping us on our toes, pushing us to do more/faster, and yet supporting us along the way as well.

        M. 

        (0) 
  1. Andreas Schramböck
    Does anyone have experience with replacing the standard editor from the portal with the TinyMCE editor? Maybe someone can send me a step by step documentation?

    Regards
    Andreas

    (0) 

Leave a Reply