You are here: start » tinymce


Since CMSimple_XH 1.5 the default editor is tinyMCE. Alternative editors are available as plugins, e.g. CKEditor.

The editors that were available for CMSimple and CMSimple_XH < 1.5 can't be used anymore, as the editor interface has completely changed.


You can choose the toolbar to use under Plugins→Tinymce→Init. While the “fontawesome” init (the default) presents all the bells and whistles, the “minimal” init concentrates on the most often needed functionality. “medium” is somewhere in between, and “sidebar” is meant for use with some other plugins. There are even more inits available; you may try them out.

How to customize the toolbar and tinyMCE in general is explained below.


The tinyMCE works similar to modern word processors, e.g. MS Word, so its usage is somewhat self explaining. Note that tinyMCE offers a context menu.

A video tutorial on using tinyMCE can be found on YouTube. Please note that this tutorial isn't particularly made for CMSimple_XH, so only the first two videos are relevant, and the hints about the heading levels are not correct for CMSimple_XH: use exactly one heading 1-3 as page heading, and use additional headings 4-6 for structuring the page (see Content and Pagedata).

There is a screencast on YouTube showing how to insert and align images with CMSimple_XH. A German tutorial about presenting images with CMSimple_XH explains further possibilities by using lightboxes and gallery plugins.


If none of the delivered toolbars meet your requirements, you can customize them. In plugins/tinymce/inits/ you'll find the files relating to the toolbar setting (not the file plugins/tinymce/init.js). Choose the one that's most closely to what you want, copy and rename it to e.g init_mytoolbar.js. Under Plugins→Tinymce→Toolbar choose “mytoolbar” and open any page in edit mode; that's reasonable before you make any customizations as you can check them step by step by simply refreshing the browser. Then open init_mytoolbar.js in a text editor.

There you'll find one or more options “toolbarX”. Each of them holds the definition for a single row of the toolbar. The value is a comma separated list of words or bars (|), with each word representing a button or selectbox, and a bar representing a vertical separator. Just rearrange the words in the order you like, distributed to the lines as you prefer. After saving the file, you can check the result by refreshing your browser.

tinyMCE can be customized further by changing, removing or adding options in the chosen init_*.js file. The options are explained in the tinyMCE documentation. Most of them work for CMSimple_XH; the only exceptions are the options, that are configured to %PLACEHOLDERS%. Don't change or remove them, as this might break the seamless integration with CMSimple_XH.

How to used prepared snippets is explained in the forum.


By default TinyMCE does not do any spellchecking. If you want to enable it, you first have to add spellchecker to the list of plugins in your init file (the order of the plugins does not matter, but it might be prudent to stick with an alphabetic ordering). The next step is to actually activate the spellchecker. The simplest option is to use the browser's spellchecking capabilities (which might not work on older browsers); to do so, just add the following option:

browser_spellcheck: true,

Take care that there is a trailing comma in the line before you insert the new line.

You likely have noticed the browser's spellchecking in action elsewhere (for instance, in simple textareas), and it is supposed to work the same in TinyMCE, namely that all unknown (and therefore potentially misspelled) words are highlighted with a squiggly underline). Depending on the browser this solution may already be sufficient for your purposes. It might, however, be insufficient for multilingual sites.

If the browser's built-in spellchecker is not sufficient for your purposes, you can use the PHP Spellchecker component which requires the PHP Enchant extension to be available (check Settings → Info → PHP info). Then:

  • Unzip it into plugins/tinymce4/tinymce/plugins/spellchecker/, so that there is plugins/tinymce4/tinymce/plugins/spellchecker/spellchecker.php etc.
  • Change line 20 in plugins/tinymce4/tinymce/plugins/spellchecker/spellchecker.php to “enchant_dicts_path” ⇒ realpath(“./dicts”),
  • Download word lists for the desired languages and put them into plugins/tinymce4/tinymce/plugins/spellchecker/dicts/. For each language two files are required which are named en_US.dic and en_US.aff, for instance. Quite useable word lists are distributed by the OpenOffice project, for example for American English and German. You can download the extensions, unzip them (the file extension is oxt, but they are actually ZIP files); somewhere in the unpacked archive you'll find the desired files.
  • Finally add the spellchecker tool button to the desired toolbarX in your init file, and also add the following line:
spellchecker_rpc_url: 'spellchecker.php',

The actual usage of the spellchecker is supposed to be pretty much self explaining.

You are here: start » tinymce
Except where otherwise noted, content on this wiki is licensed under the following license: GNU Free Documentation License 1.3
Valid XHTML 1.0 Valid CSS Driven by DokuWiki