TinyMCE

This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

Overview

TinyMCE is a robust open-sourced Javascript-based WYSIWYG editor by Moxiecode Systems. It is also the default editor for Evo with any new installation. As of this writing, TinyMCE is currently at version 2.1.1.1, so all documentation will refer to this version unless otherwise noted. Future revisions of the documentation may change as new versions are released to highlight new features and changes. Please refer to the TinyMCE Changelog for information on what has changed between versions.

Information regarding TinyMCE itself as well as examples and documentation can be found on the TinyMCE website. So instead of talking about TinyMCE in detail we'll concentrate on things that are Evo specific, namely the configuration of TinyMCE as it applies to its use in the admin interface and in template variable instances.

System Configuration

There are a number of TinyMCE specific settings in the System Configuration under the Interfaces & Features tab. Each of these settings only apply to the use of TinyMCE within the admin interface. NOTE: Since all of these settings can be overridden on a per-user level, be sure and check your user settings should changes to the main System Configuration appear not to work.

Theme

Here you can select which theme or skin to use with the editor. The four choices are Simple, Advanced, Content Editor, and Custom. With the exception of Custom, all themes are pre-determined and cannot be changed.

The Custom theme is the only theme that allows you to choose which plugins and buttons to use. You can assign plugins and buttons via the Custom Plugins and Custom Buttons settings.

One common question in regards to themes is how you control the location of the toolbar. By default the location of the toolbar for the Simple and Advanced themes is at the bottom. This is hard coded into the theme and cannot be changed.

If you prefer it to be at the top you can use the Content Editor theme or pick the Custom theme and set the buttons and plugins to match any of the other themes. Both the Content Editor and Custom themes are set to display the toolbar at top instead of the bottom.

Custom Plugins

Enter the plugins to use for the Custom theme as a comma separated list. Refer to the Plugins reference section of the TinyMCE wiki for information about available plugins.

Custom Buttons

Enter the buttons to use for the Custom theme as a comma separated list for each row. Be sure that each button has the required plugin enabled in the Custom Plugins setting. There are a total of four available rows so be sure and spread out your buttons assignments.

If there are too many buttons assigned to a single row you may run the risk of causing TinyMCE to span wider than the area that is available and will likely mess up your layout. Refer to the Button / control reference section of the TinyMCE wiki for information about button assignments.

CSS selectors

Here you can enter a list of selectors that should be available in the editor. Enter them as follows:

displayName=selectorName;displayName2=selectorName2

For instance, say you have .mono and .smallText selectors in your site CSS file, you could add them here as:

Monospaced text=mono;Small text=smallText

Note that the last entry should not have a semi-colon after it.

Note the CSS file is that of your website template, not a CSS file in the tinymce plugin

Plugin Configuration

There are a number of TinyMCE settings that don't change very often and/or are a part of the TinyMCE configuration. As such they were made to be part of the plugin configuration itself and don't show up in the System Configuration.

All of them can be found in the Configuration tab of the plugin. Some are global settings that apply to any instance of TinyMCE and some are for front-end use only when TinyMCE is called from a template variable instance.

Custom Parameters (New in 2.1.1.1a)

This option allows you to add other parameters that don't exist within the plugin configuration. This option is only available if the Advanced, Content Editor, or Custom themes are used and is global for both front-end and admin interface use.

Parameters should be entered into the textarea and formatted as required by the TinyMCE config. For example, here's a typical set of TinyMCE parameters:

convert_newlines_to_brs : false,
force_p_newlines : true,
force_br_newlines : false,
remove_linebreaks : true

Parameters are to be formatted with the parameter name, followed by a colon, the value, and ending with a comma. It's recommended to have a space before and after the colon. The ending comma for each parameter line is absolutely required by all but the last parameter line.

Although it helps with editing, it is not required to have each parameter on a separate line.

Block Formats

This option should contain a comma separated list of formats that will be available in the format drop down list. The default value of this option is p,address,pre,h1,h2,h3,h4,h5,h6. This option is only available if the Advanced, Content Editor, or Custom themes are used.

Entity Encoding

This option controls how entities/characters gets processed by TinyMCE. The value can be set to numeric, named or raw. Where numeric is numeric representation such as " " named is entity names such as "" and raw is " ". The default value of this option is named, if named is used the entities option will be used to convert the codes into names.

Encoding types:

named

Characters will be converted into named entities based on the entities option. For example, a non-breaking space could be encoded as  .

numeric

Characters will be converted into numeric entities. For example, a non-breaking space would be encoded as &160;.

raw

All characters will be stored in non entity form except these XML root entities: & = < > " '

Entities

This option contains a comma separated list of entity names that is used instead of characters. Odd items are the character code and even items are the name of the character code. Part of the default value of this option is placed in the example below.

Example of usage of the entities option / default value:

160,nbsp,38,amp,34,quot,162,cent,8364,euro,163,pound,165,yen,169,copy,174,reg,8482,trade,8240,permil,60,lt,62,gt,8804,le,8805,ge,176,deg,8722,minus

Path Options

There are three options that relate to how paths are written whenever you use the image, link, and/or media plugins.

rootrelative

Based on the root of the site (Ex. /somedir/somfile.html).

docrelative

Based on the location of the link itself (Ex. ../../somfile.html).

fullpathurl

Based on the full URL of the site (Ex. http://www.mysite.com/somedir/somfile.html).

Cleanup

This option enables or disables the built-in clean up functionality. TinyMCE is equipped with powerful clean up functionality that enables you to specify what elements and attributes are allowed and how HTML contents should be generated. This option is set to enabled by default.

Notice: It's not recommended to disable this feature.

It might be worth mentioning that the browser usually messes with the HTML. The clean up not only fixes several problems with the browsers' parsed HTML document, like paths etc., it also makes sure it is a correct XHTML document, with all tags closed, the " at the right places, and things like that.

Advanced Resizing

This option gives you the ability to enable/disable the resizing option.

Advanced Image Styles

This option only applies to the Advanced Image (advimage) plugin and is primarily used to allow for applying a style or class to an image. This option should contain a semicolon separated list of class titles and class names separated by =. The titles are the ones that get presented to the user in the styles drop down list and and the class names is the classes that gets inserted.

Advanced Link Styles

This option only applies to the Advanced Link (advlink) plugin and is primarily used to allow for applying a style or class to a link. This option should contain a semicolon separated list of class titles and class names separated by =. The titles are the ones that get presented to the user in the styles drop down list and and the class names is the classes that gets inserted.

Disabled Buttons

This option should contain a comma separated list of controls to disable from any toolbar row/panel in TinyMCE.

Link List

This option allows you to enable or disable the link dialog window in TinyMCE. The link list is a drop-down box of all published pages of your site. It is disabled by default to ensure that large sites don't slow down the use of TinyMCE for content editors.

Web Theme

Just like for the main Theme option, you can select which theme or skin to use when the editor is initiated for front-end use via a template variable. In order to assign custom plugins and buttons, you must choose Custom and then set the Web Plugins and Web Buttons parameters.

Web Plugins

Enter the plugins to use for the Custom theme as a comma separated list. Refer to the [Plugins reference] section of the TinyMCE wiki for information about available plugins.

Web Buttons 1-4

Enter the buttons to use for the Custom theme as a comma separated list for each row. Be sure that each button has the required plugin enabled in the Web Plugins setting. There are a total of four available rows so be sure and spread out your buttons assignments.

If there are too many buttons assigned to a single row you may run the risk of causing TinyMCE to span wider than the area that is available and will likely mess up your layout. Refer to the [Button / control reference] section of the TinyMCE wiki for information about button assignments.

NOTE:
The file browser is disabled for use in the image, link, and media plugins when TinyMCE is used on the front-end of your site. This is necessary since the file browser requires a manager session and would otherwise be insecure.

Web Toolbar Alignment

This option enables you to specify the alignment of the toolbar, this value can be ltr (left to right) or rtl (right to left).

Integrate TinyMCE spellcheck

NOTE:
The latest versions of the TinyMCE plugin (3.2+) already have a working copy of the spellchecker plugin. To enable it, go to Tools => Configuration => Interface & Features.

Then, under TinyMCE Settings, set the Theme to "Custom" and add "spellchecker" to the Custom Plugins and Custom Buttons settings. The defaults for custom plugins and buttons should duplicate the same configuration as the Content Editor theme.

By default, the spellchecker plugin is configured to use the Google web service and will display all languages available on the spellchecker button. If more configuration is required then the instructions below could be used to further customize the plugin.

First step is to use the guide at [[1]]. use. I only managed to get the Google web service working so I won't know about the others. The internal PHP version I tried but it didn't work straightaway.

// Spellchecker class
// require_once("classes/TinyPspellShell.class.php"); // Command line pspell
require_once("classes/TinyGoogleSpell.class.php"); // Google web service
// require_once("classes/TinyPspell.class.php"); // Internal PHP version

The problem lies in the initialisation in the original manual, Evo should handle this. In my setup it only does so partially from the admin interface. You should go to Tools - > Configuration -> Interface & Features, Set Theme to "custom", add "spellchecker" to "Custom Plugins:" and "Custom Buttons:", don't forget the comma before "spellchecker". All without the citation marks, of course. You can pick any row of buttons you wish. The stuff that's outside the admin interface isn't that hard. Find the file tinymce.functions.php It's under assets/plugins/tinymce2111/

Open the file with an editor and add after

$tinymceInit .= "onchange_callback : \"tvOnTinyMCEChangeCallBack\",\n";

but before

// Advanced options 
if($theme == "editor" || $theme == "custom"){

around line 158

//Spellcheck language options
$tinymceInit .= "spellchecker_languages : \"English=en,+Dutch=nl\",\n";

There are other places to do this but it worked here.

This completes the initialisation for TinyMCE. Add languages as you wish, the one with the + before is default. Save everything and you're done. There might be a neater solution than hacking into this file but I don't know it. Also PSpell might work but just not in my hosts configuration, if you know how, feel free to edit this page.

Troubleshooting

Disallowed file type errors when uploading Flash files

With version 3.0+, the Flash plugin has been deprecated and replaced with the Media plugin. As such, the use of the Flash folder in the Assets directory is no longer valid with the current file browser. TinyMCE treats all Flash uploads as Media uploads.

If you have any Flash files, just move them to the Media directory and update the links for them. This is a rather small thing and the only reason this problem exists is because of the way the file browser works.

To correct this to allow for Flash uploads, simply go to Tools->Configuration, click on the Interface & Features tab, and scroll down to the Uploadable Media Types and Uploadable Flash Types options.

Copy the values of the Uploadable Flash Types to the Uploadable Media Types, save your settings, and you're done.

Image does not show or are broken in the Image Editor

This isn't a problem with TinyMCE but rather the Image Editor portion of the Resource Browser. The problem occurs because the Image Editor is using an incorrect Resource URL path.

Go to Tools-Configuration, click on the Interface & Features tab, and scroll down to the Resource URL option. Chances are it's set to a relative URL. Change it to either a full URL or a root relative URL.

Suggest an edit to this page.