Missouri State University

Customizing TinyMCE

TinyMCE is a flexible and extensible editor. The default distribution will provide a functional starting point, but customizing the install is highly recommended. TinyMCE has numerous customization and configuration options documented on their site. The instructions on this page are some of the most useful as well as options specific to a RedDot CMS Integration.

Customzing the Editor

Customizations to the editor are typically made within 3 different files in the root of the TinyMCE distribution:

  1. editor.asp (main editor file)
  2. inlineeditor.asp (configuration for inlineediting) 
  3. common.js (shared javascript settings).

Edit Area Stylesheet

These changes are made in the editor.asp and inlineeditor.asp files.

Within the tinyMCE.init object, the content_css property specifies which stylesheet to use for the content within the editting area. The easiest option is to point this line to the absolute URL of your site's main stylesheet. If sites within the same project use different styles, you can use an ASP page and RQL to determine which set of styles to output. An example custom.css.asp file is distributed in the TinyMCE root folder.

Styles Menu

These changes are made in the editor.asp and inlineeditor.asp files.

The name styles on the menu is a misnomer. In actuality the menu options are class tags which can be applied to any selection. By default the styles menu loads in all of the class names from the edit area stylesheet. The theme_advanced_styles option within the tinyMCE.init object allows you to override the default behavior and specify class names to apply. Multiple options are separated by commas and the format of an option is: Display Name=Value.

Table Styles

These changes are made in the editor.asp and inlineeditor.asp files.

As with the styles menu, these options are class names that show up in the appropriate table dialogs. By default, the menu will list the same options as the styles menu. The table_styles and table_row_styles options within the tinyMCE.init object allow you to specify which classes will be displayed in the menus. See Style Menu for format specifications.

Block Level Format Menu

These changes are made in the editor.asp and inlineeditor.asp files.

Block level formatting tags are specified in the theme_advanced_blockformats option of the tinyMCE.init object. The option is simply the specified tag names separated by commas.

Spellcheck

As of version 3.3.8.10, the spell checker is enabled by default and requires no extra configuration.

Plugins

These changes are made in the editor.asp and inlineeditor.asp files.

TinyMCE is distributed with a large number of plugins of which only a small set is enabled by default. Plugins are enabled by adding the plugin folder name to the plugins option in the tinyMCE.init object. The reddot plugin handles most of the editor integration with CMS and includes the functionality of multiple plugins. As such, the following plugins should not be enabled and are not distributed with the editor:

  • advimage
  • advlink
  • autosave
  • contextmenu
  • save
  • style

The functionality of these plugins is part of the reddot plugin. All of the options listed in the TinyMCE documentation are still available.

Toolbar Buttons

These changes are made in the editor.asp and inlineeditor.asp files.

Buttons and menus on the 3 toolbars are initially added in the 3 toolbar variables at the top of the editor.asp file. RedDot permssion mappings can remove certain buttons from the lists, but will never add back to the original sets. Removing a toolbar button does not prevent markup from being used in the editor - content can still be manually input or pasted. The button order on the toolbar menus can be changed and buttons can be added and removed as needed.

Restricting Allowed HTML Markup

These changes are made in the common.js file.

TinyMCE contains a powerful code cleanup engine which is extensible. You can specify what tags to disallow. The RedDot distribution has been extended to allow an instance to disallow certain styles as well. Each is configured separately and each is affected by RedDot permission mappings.

Restricting Tags

These changes are made in the common.js file.

Tags specified in the InvalidElements variable at the top of the file will be stripped from the content on load, save, paste and several other events. You can specify tags which should never be allowed in this variable; separate multipe values by commas. This list is expanded when RedDot permssion mappings are set and thus it is recommended that these settings only be used for tags not covered by such mappings.

Restricting Styles

These changes are made in the common.js file.

Styles specified in the InvalidStyleElements variable at the top of the file will be stripped from the content on load, save, paste and several other events. You can specify styles which should never be allowed in this variable; separate multipe values by commas. This list is expanded when RedDot permssion mappings are set and thus it is recommended that these settings only be used for styles not covered by such mappings.

RedDot Editor Permssions

These changes are made in the common.js file.

RedDot templates allow you to specify Text Editor Settings to enable or disable content within a specific element. The TinyMCE RedDot integration utilizes such permissions to restrict the allowed markup.

PermssionAffected ButtonsAffected TagsAffected Styles
Paste formatted Unused Unused Unused
Justified Align Full   text-align: justify
Align left Align Left   text-align: left
Center Align Center   text-align: center
Align right Align Right   text-align: right
Highlight Unused Unused Unused
Bold Bold b,strong font-weight
Font Font Drop Down Menu font font-family,font
Font color Color   color
Italic Italic i,em,cite font-style: italic
Font size Font Size Menu font-size, font-stretch
Underline Underline u text-decoration: underline
Insert image Insert/Edit Image, Insert/Edit Media
img  
Define jump mark Insert/Edit Anchor    
Insert jump mark Unused Unused  Unused
Insert link Insert/Edit Link, Unlink a  
External URLs allowed Unused Unused  Unused
Define target Unused Unused  Unused
Insert tab Indent
   
Insert table all table controls table,tr,td,th,thead,tbody,tfoot  
Insert list ordered list, unordered list ul,ol  
Clear tab Outdent    
Subscript Subscript    
Superscript Superscript    
Insert horizontal line Insert Horizontal Ruler hr  
Do not allow wrapping Unused Unused  Unused
Symbol table Insert Custom Character    
Activate Drag & Drop Unused Unused  Unused
Insert markup Unused Unused  Unused
User-Defined Color Foreground & background color pickers Unused  Unused
Spelling Spellcheck Unused  Unused

There are occasions where the default mappings may not give the desired control. For instance: restricting font size settings also restricts the ability to specify headings. In that case, the mappings for font-size can be altered such that heading levels are not removed. (This is the default behaviour of the template editor but not of TinyMCE).

Permission mappings are controled by mappings within the  common.js file. The first section is the ButtonCode object which maps buttons to html tags which should not be allowed. For our previous example of font sizes and headings, we would simply uncomment the line:

//"fontsizeselect": "h1,h2,h3,h4,h5,h6",

This would have the effect of stripping all heading tags whenever the font size menu was removed from the toolbar.

The second section containing the ButtonStyleCode object works much the same way. The mappings in this code however, restrict values in the style attribute of any element.

Source Button

The appearance of the source button is controled by the Enable source code in Text Editor setting in the Global Authorization Package for the project.