Eazy az 1-2-3

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.

4 Comments

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

Former Member December 18, 2006 at 11:11 pm

Whatever happened to waiting 5 years to see it here on SDN? 😉

They are already in the test phase with the new editor 🙂

like (0)
1. Eddy De Clercq Post authorDecember 18, 2006 at 11:17 pm
  
  That’s good news indeed.
  
  like (0)
  1. Former Member December 20, 2006 at 9:19 am
    
    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.
    
    like (0)
Former Member January 24, 2007 at 1:44 am

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

like (0)