The expansion of Movable Type’s Rich Text Editor
One of the updates to Movable Type 5.2 is the adoption of TinyMCE as the backbone for the newly refurbished Rich Text Editor. Coinciding with this change, the Rich Text Editor’s API has also been refurbished and among other things now has the capability of handling plug-ins.
One of the plug-ins supported by TinyMCE is TableFeatureForTinyMCE, which allows the user to add custom buttons to a table. Let’s examine this plug-in as an introduction to some of the new capabilities of the Rich Text Editor.
Before diving into the world of plug-in creation, we need to back up a little and cover some basics of the Rich Text Editor itself.
TinyMCE exists as both the default rich text editor for Movable Type as well as a plug-in. Thus the related files are located in plugins/TinyMCE and mt-static/plugins/TinyMCE.
Below are the contents for plugins/TinyMCE/config.yaml:
id: TinyMCE
name: TinyMCE
version: 1
author_link: http://www.movabletype.org/
author_name: Six Apart, Ltd.
description: <MT_TRANS phrase="Default WYSIWYG editor.">
editors:
tinymce:
label: TinyMCE
template: editor.tmpl
Up until Movable Type 5.1, the “richtext_editors” key specified the rich text editor within the API.
From version 5.2, however, this key has been changed to “editors”.
If you write template: editor.tmpl, like the example above,
plugins/TinyMCE/tmpl/editor.tmpl will be used in the editing screen. Although we will not go into the specifics of the template at this time, for now just understand that this is how we call TinyMCE.
When expanding the Rich Text Editor, add the extension: key after editors: tinymce: and specify the template’s name.
Concerning TableFeatureForTinyMCE, make sure this file plugins/TableFeatureForTinyMCE/config.yaml contains the specifics listed below:
id: TableFeatureForTinyMCE
name: TableFeatureForTinyMCE
version: 1.01
author_link: http://www.movabletype.org/
author_name: Six Apart, Ltd.
description: <MT_TRANS phrase="Add table feature for TinyMCE.">
editors:
tinymce:
extension: extension.tmpl
If the instructions are written correctly, plugins/TableFeatureForTinyMCE/tmpl/extension.tmpl will be called. In this case, extension.tmpl will always be called before TinyMCE’s editor.tmpl, so you don’t need to worry about whether or not editor.tmpl will be used before extension.tmpl.
Below is the content of extension.tmpl:
<mt:setvarblock name="js_include" append="1"> <script type="text/javascript" src="<mt:var name="static_uri">plugins/TableFeatureForTinyMCE/extension.js"></script> </mt:setvarblock> <mt:setvarblock name="html_head" append="1"> <link rel="stylesheet" href="<mt:var name="static_uri">plugins/TableFeatureForTinyMCE/skin/ui.css" type="text/css" /> </mt:setvarblock>
In many cases, JavaScript and CSS files will be inserted as their own template. With TabelFeatureForTinyMCE, the template uses files installed under the mt-static/plugins/TableFeatureForTinyMCE directory. However, in the case of a very simple plug-in, JavaScript and CSS can be written directly into the template itself.
We can now move onto expanding TinyMCE.
When plugins/TinyMCE/tmpl/editor.tmpl is called, TinyMCE is not applied to the text area. This then gives you the ability to change various options via the plugins/TableFeatureForTinyMCE/tmpl/extension.tmpl file.
Listed below are four options that can be changed via TableFeatureForTinyMCE:
- add table plug-in (table plugin is included in TinyMCE package)
- add CSS for the editing screen (includes table element styles)
- add table related buttons
- specify the size of table related dialogue
In MT’s TinyMCE, optional configurations are written in MT.editor.TinyMCE.config. In this case, the TableFetureForTinyMCE expansion writes its configuration in mt-static/plugins/TableFeatureForTinyMCE/extension.js:
(function($) {
var config = MT.Editor.TinyMCE.config;
var base_url = StaticURI + 'plugins/TableFeatureForTinyMCE/';
var buttons =
(config.plugin_mt_wysiwyg_buttons3 || '') + ',tablecontrols,|,visualaid';
$.extend(config, {
plugins: config.plugins + ',table',
content_css: config.content_css + ',' + base_url + 'skin/content.css',
plugin_mt_wysiwyg_buttons3: buttons
});
$.extend(config.plugin_mt_inlinepopups_window_sizes, {
'table/table.htm': {
width: 600,
height: 300
},
'table/row.htm': {
width: 450,
height: 300
},
'table/cell.htm': {
width: 450,
height: 300
},
'table/merge_cells.htm': {
width: 250,
height: 140
}
});
})(jQuery);
Additional plug-ins, CSS and buttons are located within lines 8 ~ 12.
$.extend(config, {
plugins: config.plugins + ',table',
content_css: config.content_css + ',' + base_url + 'skin/content.css',
plugin_mt_wysiwyg_buttons3: buttons
});
Optional settings for the dialogue window size are located between lines 14 ~ 31. Note that this is an expanded feature by the mt_inlinepopups plugin, not a default feature of TinyMCE. Because we will not go into detail on mt_inlinepopups at this time, please view the code as an example of how expansions can work.
$.extend(config.plugin_mt_inlinepopups_window_sizes, {
....
});
In TableFeatureForTinyMCE, the configuration code looks a bit longer because of dialogue window settings. However, it is possible to shorten the code without losing any of the effects.
Within the TinyMCE set-up manual, you will notice that there are many adjustable settings. An example of one such setting is listed below:
tinyMCE.init({
accessibility_warnings : true
});
The code written above produces exactly the same effect as the code written below:
(function($) {
var config = MT.Editor.TinyMCE.config;
$.extend(config, {
accessibility_warnings : true
});
})(jQuery);
In TableFeatureForTinyMCE, mt-static/plugins/TableFeatureForTinyMCE/skin/ui.css is loaded in extension.tmpl and is used to indicate button images for use within a table. Below is the content of ui.css:
.mtSkin span.mce_table,
.mtSkin span.mce_row_props,
.mtSkin span.mce_cell_props,
.mtSkin span.mce_row_before,
.mtSkin span.mce_row_after,
.mtSkin span.mce_delete_row,
.mtSkin span.mce_col_before,
.mtSkin span.mce_col_after,
.mtSkin span.mce_delete_col,
.mtSkin span.mce_split_cells,
.mtSkin span.mce_merge_cells,
.mtSkin span.mce_visualaid {
background: transparent url(./img/icons.png) no-repeat top left;
}
.mtSkin span.mce_table { background-position: 0 0; }
.mtSkin span.mce_row_props { background-position: -50px 0; }
.mtSkin span.mce_cell_props { background-position: -100px 0; }
.mtSkin span.mce_row_before { background-position: -150px 0; }
.mtSkin span.mce_row_after { background-position: -200px 0; }
.mtSkin span.mce_delete_row { background-position: -250px 0; }
.mtSkin span.mce_col_before { background-position: -300px 0; }
.mtSkin span.mce_col_after { background-position: -350px 0; }
.mtSkin span.mce_delete_col { background-position: -400px 0; }
.mtSkin span.mce_split_cells { background-position: -450px 0; }
.mtSkin span.mce_merge_cells { background-position: -500px 0; }
.mtSkin span.mce_visualaid { background-position: -550px 0; }
By using TinyMCE via Movable Type, a customized skin named “mt” can be loaded. The “mtSkin” class is then applied as a parent element of the editor. The CSS of this customized skin can be found at mt-static/plugins/TinyMCE/tiny_mce/themes/advanced/skins/mt/ui.css.
Please reference this CSS file if you wish to customize the editor’s UI.
The sample plug-in referenced in this article can be downloaded from the link below.