Tutorial: WYSIWYG under Movable Type 3.x

HTMLArea :  Do NOT use
Until recently I used HTMLArea as a WYSIWYG editor for MT, but that hasn’t been a very satisfying experience: Sometimes the editor does not load properly – your HTML code gets mixed up, especially when using  javascript – it hasn’t many editor functions and even these do not work properly.

FCKeditor: Yes please! HOT HOT HOT

[Update: at this moment we use Arvin’s EnhancedEntryEditing plugin. It works fine and can be fully configured]

 It took me some time to find a good alternative. But through a german and spanish blog I fortunately learned about FCKeditor. This editor really integrates well with Movable Type. 

I already wrote a tutorial in dutch about installing FCKeditor, but I guess not many of you know dutch. And because I could not find any other tutorials on MT and WYSIWYG other then on installing HTMLArea, I decided to translate my original dutch tutorial in english. I hope it will be helpfull!

fckeditor.gif

Tutorial: Installing FCKeditor under Movable Type 3.x

  1. Download FCKeditor (the version I used is 2.0 FC) and unzip the downloaded file in your MT static directory. This will result in a directory named FCKeditor.
  2. Open the file [MT installation dir]/tmpl/cms/header.tmpl  and save it as: header_edit_entry.tmpl
  3. Add the following code to header_edit_entry.tmpl between the tags <head> … </head>:

       <script type="text/javascript" 
          src="<TMPL_VAR NAME=STATIC_URI>FCKeditor/fckeditor.js"></script>
      
       <script type="text/javascript">
          window.onload = function()
          {
            var oFCKeditor = new FCKeditor( ‘text’ ) ;
            oFCKeditor.BasePath = ‘<TMPL_VAR NAME=STATIC_URI>FCKeditor/’ ;
            oFCKeditor.Width = 580 ;
            oFCKeditor.Height = 400 ;
            oFCKeditor.CheckBrowser = true ;
            oFCKeditor.ReplaceTextarea() ;

            pFCKeditor = new FCKeditor( ‘text_more’ ) ;
            pFCKeditor.BasePath = ‘<TMPL_VAR NAME=STATIC_URI>FCKeditor/’ ;
            pFCKeditor.Width = 580 ;
            pFCKeditor.Height = 400 ;
            pFCKeditor.CheckBrowser = true ;
            pFCKeditor.ReplaceTextarea() ;
               
            qFCKeditor = new FCKeditor( ‘excerpt’ ) ;
            qFCKeditor.BasePath = ‘<TMPL_VAR NAME=STATIC_URI>FCKeditor/’ ;
            qFCKeditor.ToolbarSet = "MTExcerpt" ;
            qFCKeditor.Width = 580 ;
            qFCKeditor.Height = 200 ;
            qFCKeditor.CheckBrowser = true ;
            qFCKeditor.ReplaceTextarea() ;
          }
        </script>

  4. Open the file [MT installation dir]/tmpl/cms/edit_entry.tmpl and replace <TMPL_INCLUDE NAME="header.tmpl"> with <TMPL_INCLUDE NAME="header_edit_entry.tmpl">
  5. Delete in the same file (edit_entry.tmpl) the quicklinks. These are the B, I, U etc. buttons that appear above the Entry Body and Extended Entry textareas. Delte the following code twice:

    <script type="text/javascript">
    <!–
    if (canFormat) {
        with (document) {
            write(‘<a title="<MT_TRANS phrase="Bold" escape="singlequotes">
    […]
        }
    }
    // –>
    </script>

    Notice: You will have to delete this code once for the Entry Body and once for the Extended Entry.

  6. Now it is time to edit the FCKeditor configuration file (fckconfig.js). You will have to remove the editor functions you don’t use and that might be confusing to your users  (for instance the New File button and the Save button). I edited the Default Toolbarset, but you can also create a new Toolbarset. If you do so you will also have to edit the code under step 3.  I use the Default Toolbarset for the Entry Body and the Extended Entry.

    Replace the existing Default ToolbarSet code with:

    FCKConfig.ToolbarSets["Default"] = [
    [‘Source’],
    [‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’,’-‘],
    [‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
    [‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’-‘,’Subscript’,’Superscript’],
    [‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’],
    [‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
    [‘Link’,’Unlink’,’Anchor’],
    [‘Image’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’UniversalKey’]  ,  
    [‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],
    ‘ /’,
    [‘Style’,’FontFormat’,’FontName’,’FontSize’],
    [‘TextColor’,’BGColor’],
    [‘About’]
    ] ;

  7. Next I have created a more restricted Toolbarset for the Excerpt. Add the folowing code:

    FCKConfig.ToolbarSets["MTExcerpt"] = [
     [‘Source’],
     [‘Bold’,’Italic’,’Underline’,’-‘,’OrderedList’,’UnorderedList’,’-‘,’Link’,’Unlink’,’-‘,’About’]
    ] ;

  8. Finally deactivate the built-in image and linkbrowser:

    FCKConfig.LinkBrowser = false ;
    FCKConfig.ImageBrowser = false ;

  9. That’s all! Good luck! 
Be Sociable, Share!

45 thoughts on “Tutorial: WYSIWYG under Movable Type 3.x

  1. “You obviously put a lot of work into that post and its very interesting to see the thought process
    that you went through to come up with those conclusion. Thanks for sharing your deep thoughts.
    I must admit that I think you nailed it on this one.”

  2. Is there a step by step manual for the latest 4.25 version of this editor as i am stuck and need to know exactly how to install this.

  3. Thanks for this tutorial.

    I cannot get arvind’s EEI to work – my popus don’t populate on Firefox and the entry area is inacessible in IE 6.0.

    I tried FCKeditor as an alternative. It runs beautifully with the samples (include a past from MS Word button), but I get completely blank entry screens and no buttons with MT 3.2.

    I ‘hard-coded’ the static path for FCKeditor, as described above, since I’m in a ‘plugins’ directory. Still not able to get MT to show up WYSIWYG! I hope 3.3 has a better built-in author screen.

    Anyone have any ideas to quick-check, much appreciated.

  4. seesm to be working now, the EnhancedEntryEditing, but still no luck getting all the features avaliable, just the standard one’s.

  5. @patrick,
    i tried that one also, but in there, the images to click on, where not coming up :o(
    the plugin worked though, but the buttons were not showing :o(

    regards, een medeleienaar :p

  6. @ mdi:

    Regarding WYSIWYG: I stopped using FCKeditor. I now use the EnhancedEntryEditing-plugin: http://www.movalog.com/plugins/wiki/Ajaxify/EnhancedEntryEditing

    You can change (add more / remove, re-sort) the menu-items of this wysiwyg-editor by editing: cgi-bin/plugins/Ajaxify/EnhancedEntryEditing.pl

    I Changed the following code:

    plugins : “iespell, emotions, inlinepopups,paste, table, searchreplace, advlink, advimage”,

    theme_advanced_buttons1 : ?separator,cut,copy,separator,paste,pastetext,pasteword,separator,undo,redo,separator,search,
    replace,separator,bold,italic,underline,strikethrough,separator,sub,sup,separator,link,unlink,
    separator,image,table,separator,emotions,charmap,separator”,

    theme_advanced_buttons2 : “separator,bullist,numlist,separator,outdent,indent,separator,justifyleft,justifycenter,justifyright,
    justifyfull,separator,forecolor,backcolor,separator,fontsizeselect “,

    … and I added a fixed width of 580

  7. newbie question, how can i add the script info here without it dissapearing?? :O(
    *see post above*

  8. first of all, thnx for the tutorial, i went to work on it (using MT 3.2) but… i downloaded FCK editor 2.2 (latest) and the first part went good, editing and renaming:header_edit_entry.tmpl
    but when i tried to edit edit_entry.tmpl the tutorial seems to be wrong (?) it says to delete the following code:

    but there is no such code in that file ?
    there seems to be something like it, but not that code ? so i’m kinda stuck here 🙁
    the code that i can find and looks like it is:

  9. Hi There!
    Sorry for my bad english.
    Is it possible to include another spellchecker instead of iespell to use an germanlanguage spellcheckertranslation? It should work on the clients side because i have no possibility to install linux extensions on the server. Which one would you prefer?

  10. Hi thanks in advance for your support.
    I have installed the plugin on my website and works good, but here I have one problem, that is I can’t use the “Assign Multiple Categories” function.
    When I click it, it doesn’t work.
    Any idea ? where did I do wrong ?

  11. whewwww

    Seb’s question is my question

    I am desperate, please help :)!!!

    I just need to save the information so it can be retrieved by a page… that is all.. right? shouldn’t that be easy? (seems the whole point of the app…)

    I have searched forums at the Sourceforge page, read the entire wiki, and thrice gone through web page–as of yet no luck.

    If anyone can offer help, please, drop me a line–even just a link to a working demonstration of it saving data somewhere and then retrieving would be great.

  12. i want to use fckeditor with jsp language. but upload to server don’t work what have i to do to make it work?

  13. Very very tanck you for this guide.
    this Entry is very easy and very goog.
    i use this wysiwyg in my weblog.
    tank again.

  14. Hiya, simply, VERY simply, i would like to

    1- save data from Fck to my db.
    2- Show old data from db in the fck when editing
    3- generate dynamic pages

    I dunno if its the right place to ask this, but it would be awsome if you writed a tut about it 😀

  15. Hi,
    I am using the FCK Editor ver 2.2 for asp.net

    i’m having difficulty in setting up the image and link browser. when i click the insert image, i can see the browser.asp.. but it gives me an error: XML request error (internal server error 500).. what does this mean? how can i fix this problem?

    – tnx!

  16. I am extremely interested in installing FCKeditor but concerned about the slowness that someone mentioned above. Can someone please tell me how slow it is? Does it make editing old entries unbearable?

    Thanks,
    -Brett

  17. Hey,

    Is there a possiblity that i can change the ouput of the sourcecode
    I want flash to read the html that FCKeditor makes, but flash doesnt like <span style="font-style: italic;">. I want to make the tags easier, like <b> <i> and <u>.

    Hope you guys can help me. thx allot

    regards

  18. Thank u. Thank u Thank u…
    This works like a charm…
    Couldn’t have done it without your info.
    So again.. Thanx 

  19. hi
    thank you for yor help ,i do thing you say but i dont have fckeditor in comment section(i saw source code but your java script is not on it.
    i just use individual archive and date based archive ,i put  your code
    in the header of Individual Entry Archive ,now was replaced a blank page in the textarea.(i have insalled mt on my computer and with it everything work right!!!? ).
    i use a subdomian and mt installed on cgi-bin/mt and fckeditor  is in mt-static and i use php Extension for archive page  plese help me
     

  20. @Pars:
    First do everything that is written in this tutorial and then copy the following code in the HEADER of these two Special Templates:

    Comment Preview Template
    Comment Error Template

    N.B. You have to replace the path to fckeditor.js and the BasePath with your own settings.

    <script type="text/javascript"
          src="http://weblog.leidenuniv.nl/static/fckeditor/fckeditor.js"></script&gt;

     <script type="text/javascript">
          window.onload = function()     
    {
            var oFCKeditor = new FCKeditor( ‘text’ ) ;
            oFCKeditor.BasePath = ‘http://weblog.leidenuniv.nl/static/fckeditor/’ ;
            oFCKeditor.ToolbarSet = "MTExcerpt" ;
            oFCKeditor.Width = 400 ;
            oFCKeditor.Height = 300 ;
            oFCKeditor.CheckBrowser = true ;
            oFCKeditor.ReplaceTextarea() ;
    }
        </script>

    Cheers!

  21. Patrick,

    I have IE6, Netscape 7.2 and 8.0 in a Windows 2000 environment.
    I’ve checked all three browsers and it’s the same in all three.

    Since the last changes that you suggested were in the FCKeditor file and it had an effect, obviously the connection between Movable Type and FCKeditor has been made.  So we just  need to figure out where the disconnect is.

    Thanks for your help.  I am doing a project for a volunteer group many of whom are, like your students, not technically savvy and having a wysiwyg editor is definitely going to be a factor in the success of my effort.

  22. Thank you for your response and help.

    I now have the text boxes but none of the editing toolbars. Any ideas?

  23. @Barbara

    In step 3 try to replace:

    <script type=”text/javascript” src=”<TMPL_VAR NAME=STATIC_URI>FCKeditor/fckeditor.js”></script>

    With:

    <script type=”text/javascript” src=”http://YOURDOMAIN.SOMETHING/FCKeditor/fckeditor.js”><script>

    And:

    oFCKeditor.BasePath = ‘<TMPL_VAR NAME=STATIC_URI>FCKeditor/’ ;

    with:

    oFCKeditor.BasePath = ‘http://YOURDOMAIN.SOMETHING/FCKeditor/’ ;

  24. Thank you for the tutorial. The steps you outlined are very clear. And I thought that I followed your instructions to the letter.

    My static folder is public_html,
    FCKeditor is public_html/FCKeditor,
    My cgi files and mt subfolders are in the cgi-bin.

    When I opened Movable Type and clicked on New Entry, there were no text boxes for the entry, extended entry, or excerpt. All other fields are present.

    Any ideas what could be wrong? I really would like to be able to use this editor.

  25. @Phil Wolff
    The easiest way to remove FCKeditor is to restore the original edit_entry.tmpl and header.tmpl files and remove the header_edit_entry.tmpl file you created. Then remove the FCKeditor directory from your MT-static dir. That’s all.

  26. @Gary:

    It is true that it takes a little time for the editor to load. You say you find this a problem and argue that MT-preview should be used for previewing a page, instead of the WYSIWYG-editor.

    This is, as I see it, only true when you are familiar with writing HTML. In our case we are providing weblogs to students and teachers at Leiden University. Many of them do not know a lot about creating HTML-code. Therefore for us a WHYSIWYG-editor like FCKeditor is a necessity to run a successful project.

    Without a preview of the html in each field we would kill our own project 😉

  27. Thanks for the great tutorial, Patrick. I wouldn’t have tried this without it.
    Now that I have, however, I find it too slow to load. I think it’s the html rendering of the field contents that’s doing this, and to me it seems silly to show a preview of the html in each field. That’s what the MT Preview is for!
    I search the less-than-helpful opensource forum to find out how to start with the Source button engaged (and apparently others are thinking this way given the number of unanswered posts about this). That way the normal code we’re all used to seeing in the MT entry fields will show first.
    I groused around in the config/editor js files, but didn’t see how to do this.
    Any ideas?

  28. Hello again Patrick:

    Thank you for the pointer.

    It is almost working but maybe you can help me with the last bit.

    I have changed the target URL for where I want the files to be uploaded to, but I cannot prevent it from adding/creating a directory called “Image” inside my specified directory.

    This is what I have in my config.js file:

    =======START CODE=======

    Dim ConfigUserFilesPath

    ‘ Path to user files relative to the document root.
    ‘ SECURITY TIP: Uncomment the following line to set a fixed path.
    ‘ ConfigUserFilesPath = “/UserFiles/”

    ConfigUserFilesPath = “/blog/images/2005/”

    Dim ConfigAllowedExtensions, ConfigDeniedExtensions
    Set ConfigAllowedExtensions = CreateObject( “Scripting.Dictionary” )
    Set ConfigDeniedExtensions = CreateObject( “Scripting.Dictionary” )

    ConfigAllowedExtensions.Add “File”, “”
    ConfigDeniedExtensions.Add “File”, “php|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg”

    ConfigAllowedExtensions.Add “Image”, “jpg|gif|jpeg|png|bmp”
    ConfigDeniedExtensions.Add “Image”, “”

    ConfigAllowedExtensions.Add “Flash”, “swf|fla”
    ConfigDeniedExtensions.Add “Flash”, “”

    ConfigAllowedExtensions.Add “Media”, “swf|fla|jpg|gif|jpeg|png|avi|mpg|mpeg|mp(1-4)|wma|wmv|wav|mid|midi|rmi|rm|ram|rmvb|mov|qt”
    ConfigDeniedExtensions.Add “Media”, “”

    =======END CODE=======

    So now, when I upload a file through the online utility it automatically creates a folder called “Image” in “/blog/images/2005/” and then stores the file there.

    Any pointers will be greatly appreciated.

    –R.

  29. @Carla:

    Sorry, right now I don’t use the spellchecker (most of our blog sites are in dutch: Leiden University Weblogs). As a result I haven’t looked at the spellchecker function yet.

    If you find a way to get it to work I would be very greatfull if you would let me know … in a later stage we might want to enable this function on our blogs.

  30. Hello Patrick:

    I followed your very well-written tutorial and got FCKeditor working on my test-blog.

    Got one question for you:

    When I click on the “upload image” utility the “Image Button – Web Page Dialog” window pops up and I can choose “Browse Server”.

    My question is, where can I change the code so that I can have a custom-default directory for my uploaded images? For now it shows up in a folder called “/UserFiles/Image” in my root directory.

    Thank you for your time.

    Regards,

    –Runa.

  31. I’m back. I have a question. I noticed the spellchecker isn’t enabled. I read the information regarding spellchecker at the FCKeditor site. The two spell checker options is ieSpell (Only for IE) and SpellCheckPages (they recommend this one). I attempted to setup the later, but with no luck. Are you using the spell checker, if so, can you give me some tips on how to get it going? Thanks in advance for your time.

Leave a Reply