WYSIWYG editor voor Movable Type 3.x

Type bericht: Tutorial;

[ENGLISH TRANSLATION]

Het was even zoeken maar uiteindelijk heb ik een goede WYSIWYG-editor gevonden voor MT!

HTMLArea :  Niet gebruiken
Tot nu toe hebben we HTMLArea gebruikt, maar dit werkte niet echt goed. Een van de meest irritante dingen aan deze editor is dat de HTML-code wordt verprutst. Voornamelijk bij het werken met javascript is dit erg lastig.

Bijvoorbeeld:

<A HREF="mypage.popup.html" onClick="return openWindow(this,’mypage’)">My Page</A>

Wordt  met HTMLArea omgetoverd tot:

<a onclick="function anonymous()
{
return openWindow(this,’mypage’)
}" href="mypage.popup.html">My Page</a>

FCKeditor : HOT HOT HOT!

[Update: Op dit moment gebruiken we Arvin’s EnhancedEntryEditing pluging, deze werkt prima en is volledig configureerbaar]

Via een Duits en een Spaans weblog kwam ik gelukkig FCKeditor op het spoor. Deze editor werkt goed samen met MT. 

Via een en een weblog kwam ik gelukkig op het spoor. Deze editor werkt goed samen met MT. 

 fckeditor.gif

Hieronder volgt een korte instructie om de FCKeditor in MT aan de praat te krijgen:

  1. Download FCKeditor (de versie die ik heb gebruikt is 2.0 FC) en unzip de file in je static directory.
  2. Open de file [MT installatie dir]/tmpl/cms/header.tmpl  en sla deze file op onder de naam: header_edit_entry.tmpl
  3. Voeg aan het bestand header_edit_entry.tmpl binnen de tags <head> … </head> de volgende code toe:

       <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 de file [MT installatie dir]/tmpl/cms/edit_entry.tmpl en vervang <TMPL_INCLUDE NAME="header.tmpl"> door <TMPL_INCLUDE NAME="header_edit_entry.tmpl">
  5. Verwijder vervolgens in hetzelfde bestand de Quicklinks. Dit zijn de B, I, U etc. buttons boven de velden Entry Body en Extended Entry. Verwijder de volgende code:

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

    Je vindt deze code 2 keer: voor de velden Entry Body en Extended Entry.

  6. Nu moet je de configuratiefile van FCKeditor aanpassen. Verwijder de editorfuncties die je niet gebruikt (zoals de New File button en de Save button). Ik heb dit gedaan in de Default Toolbarset. Je kunt er ook voor kiezen om een nieuwe Toolbarset te definiëren. Als je dat doet moet je ook het script onder punt 3 aanpassen.  Ik gebruik de Default Toolbarset voor de Entry Body en de Extended Entry.

    Vervang de oorspronkelijke tekst door:

    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. Ik heb een nieuwe beperktere Toolbarset gedefinieerd voor de Excerpt. Voeg hiervoor de volgende code toe:

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

  8. Deactiveer vervolgens de image en linkbrowser van de FCKeditor:

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

  9. Klaar!
Be Sociable, Share!

9 thoughts on “WYSIWYG editor voor Movable Type 3.x

  1. Patrick,
    Thank you, everything works perfectly now. Yes, it was my mistake – I didn’t realize that I must select the text that will become the link. Instead, I thought it all goes it the popup window. Thank you so much for clarifying that for me 🙂

  2. Renee,

    I was able to reproduce the not appearing of a link in the textbox, but I could’t reproduce the loading problem:

    In order to insert a link you first have to type the text of the link-to-be in your text box. Then select the text and click on the insert link button. Type in the link information and your link should appear in your textbox.

    If you try to insert a link without selecting some existing text the link will not appear in your textbox.

    I don’t know if this will help you …

  3. Renee,

    I can’t think of a specific reason why you are having this problem. I didn’t experience it on our installation of MT. It is strange that it also happens in the demo … You could try our online demo, to see what happens:

    Online FCKeditor Demo

  4. Patrick,

    Thank you so much for your quick response! While I was waiting for your answer, I remembered that Altavista can translate web pages from Dutch to English. So, you did help me after all 🙂 A few people asked me how to use the editor with MT, so I will refer them to your new English tutorial.
    I do have a question though: when I click to insert a URL, I type it all in, but the URL never appears in my textbox and the page seems to be loading forever. It happens in both IE and Mozilla and on my FCKEditor and the demo on the Editor’s web site. Any ideas why this is happening?
    Thank you!
    ps. sorry for the double post earlier, feel free to delete one of them.

  5. Hey Patrick!

    Any chance you can translate this tutorial to english? I’ve looked everywhere for this, but couldn’t find any explanations for it in english 🙁

    Thanks!

  6. Hi Patrick!

    Any chance you could translate this tutorial to english? I hate to bother you, but I’ve looked everywhere on how to include FCKEditor with MT and I couldn’t find any answers in english 🙁

    Thank you!

  7. Heej Patrick,

    Dank je wel voor de tip die je hierover hebt achtergelaten op m’n site!

    Grappig dat FCKeditor ook met MT te gebruiken is…: ik gebruik het namelijk al op een andere site in combinatie met MamboServer. Werkt daar ook erg prettig mee.

    Vooral de vele mogelijkheden die je als gebruiker hebt zijn erg prettig!

    groetjes,
    Chantal
    p.s. Jammer trouwens dat het verplicht in te vullen e-mail adres zichtbaar is voor iedereen op je site: levert toch extra spam op voor mensen die reageren.

Leave a Reply