Skip to Content
Actions

Eazy az 1-2-3

December 18, 2006 | 7 Views |
 eddy declercq
Follow
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. 
        
    
      
    
    1. 
        
    
        
    
      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)                                     
        
            
        
        
        
    
        2. 

      

      2. 

    

    2. 
    
  2. 
        
    
    3. 

        


        
        
    
                      

        	

		
Leave a Reply