Not a developer? Go to MovableType.com

MovableType.org
Documentation
Home / Documentation / Developer

Rich Text Editors

There are few topics as polarizing as what WYSIWYG editor one should use. Everyone has their own personal favorite and everyone has a reason to sincerely dislike another. Knowing that there was no rich text editor that we as a community could select that everyone would like, we opted to create an abstraction layer that let’s people plugin whatever editor they want. Several editors have already been made available to Movable Type through this system, including:

  • YUI’s Editor
  • TinyMCE
  • FCK

If you would like to add support for a different editor, then you need to follow two simple steps:

  1. Register the editor allowing a user to select it via their mt-config.cgi configuration file.

  2. Create a template fragment that contains all the necessary HTML and Javascript to properly initialize and load the editor.

Here is the actual config.yaml for the YUI Rich Text Editor plugin:

name: YUIeditor
version: 1.0
author_name: David Davis
author_link: http://www.xantus.org/
description: Provides YUIeditor as a rich editor choice for Movable Type.
richtext_editors:
    yuieditor:
        label: YUIeditor
        template: yui_editor.tmpl

The template code then looks like this:

<mt:setvarblock name="js_include" append="1">
   <script type="text/javascript" 
      src="<$mt:var name="static_uri"$>plugins/YUIeditor/js/yui_editor.js"></script>
</mt:setvarblock>
<mt:setvarblock name="html_head" prepend="1">

<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.4.1/build/assets/skins/sam/skin.css">
<!-- -->
<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.4.1/build/fonts/fonts-min.css?_yuiversion=2.4.1" />
<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.4.1/build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.4.1/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.4.1/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css"
   href="http://yui.yahooapis.com/2.4.1/build/editor/assets/skins/sam/editor.css" />
<!-- -->
<script type="text/javascript"
  src="http://yui.yahooapis.com/2.4.1/build/utilities/utilities.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/container/container_core-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/menu/menu-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/button/button-min.js"></script>
<script src="http://yui.yahooapis.com/2.4.1/build/editor/editor-beta-min.js"></script>
<script type="text/javascript">
    /* <![CDATA[ */
    if ( !defined( window.Editor ) )
        Editor = { strings: {} };
    else
        Editor.strings = {};
    /* ]]> */
</script>
</mt:setvarblock>

<mt:setvarblock name="editor_content">
<div id="formatted" class="editor-panel">
   <div id="entry-body-field" class="field">
   <div class="field-content">
   <mt:setvarblock name="editor_content_height">
     <mt:if name="disp_prefs_height_body">
        <$mt:var name="disp_prefs_height_body"$>
     <mt:else>194</mt:if>
   </mt:setvarblock>
   <div class="editor" id="editor-content-enclosure" mt:min-height="66"
      mt:update-field-height="editor-content-height" 
      style="height: <$mt:var name="editor_content_height"$>px; 
      position:relative; padding-bottom: 10px;" 
      mt:edit-field="<mt:var name="toolbar_edit_field">" 
      mt:blog-id="<mt:var name="blog_id">">
        <textarea tabindex="3" id="editor-content-textarea" name="_text_" 
          class="full-width" style="background: #fff; 
          height: <$mt:var name="editor_content_height"$>px">
          <$mt:var name="text" escape="html"$>
        </textarea>
        <input type="hidden" name="text_height" id="editor-content-height" 
          value="<$mt:var name="editor_content_height"$>" />
        <input type="hidden" id="editor-input-content" name="text" 
          value="<$mt:var name="text" escape="html"$>" />
        <input type="hidden" id="editor-input-extended" name="text_more" 
          value="<$mt:var name="text_more" escape="html"$>" />
   </div>
   </div>
   </div>
</div>
</mt:setvarblock>
Back