How to setup multiple configurations in tinymce

I decided that the default tinymce configuration would be the advanced one setup via the admin gui. Thus, my custom one would be a simpler config that I specify only in the templates that will use it.

1. Configure tinymce

First, lets make sure tinymce is configured so the rest of this will work.

Install options:

Default action mode: Specially labelled only

Activation method: Manual override (required for multi configs)

Basic options:

Default theme editor panel: Advanced (required for multi configs)

Use icon map: no (just to be safe while testing)

Use compressor: no (i've never seen this work on any of my servers)

2. Define your new 2nd configuration

Go to the Advanced Config tab, and check Multiple Configuration Instances.

Then you can enter your new configuration options in the box. Duh...

Well, the following options are required. Use the following as a skeleton.

tinyMCE.init({

mode : "textareas",

editor_selector : "myconfig",

theme : "advanced",

theme_advanced_buttons1 : " ",

theme_advanced_buttons2 : " ",

theme_advanced_buttons3 : " "
}); 

The editor_selector option is where you give this config a unique name. All three button lines are required, and if empty, must contain at least one space char inside the quotes. Also, each line must end with a comma, except the last that has none.

Here's an example of a simple toolbar that I'll give my end users (while reserving the full advanced config for other admin pages).

tinyMCE.init({

mode : "textareas",

editor_selector : "simpleEditorConfig",

theme : "advanced",

theme_advanced_buttons1 : "bold,underline, bullist,numlist,outdent,indent",

theme_advanced_buttons2 : " ",

theme_advanced_buttons3 : " ",

theme_advanced_toolbar_location: "top"

}); 

This toolbar has just bold, underline, and a few other buttons. And it will be on the top of the edit box.

For other options, you can refer to the Current Active Default Configuration at the bottom of the page. It shows the options in the current advanced config (not the one we just defined). You might even play around with the option settings in the other tabs and see how this configuration listing changes accordingly, to help define the options you want in your custom config. And, documentation of all the tinymce options can be found by following the Usage Documentation link in the middle of the page.

3. Add the Configuration to Your Template

There are a couple different ways to enable your custom tinymce configuration. The simplest is to edit the specific template you want to use it in.

For example, lets say you have an Articles module Pubtype, and you want to use the config on the "body" field in the Modify page. Copy the modules/articles/xartemplates/admin-modify.xd file to themes/yourtheme/ modules/articles/admin-modify-mypubtype.xt.

At the top of the template insert the following lines (as explained in the tinymce Install Options tab page).

<xar:if condition="xarModGetVar('base','editor') eq 'tinymce'">

<xar:template file="tinymce_insert" module="tinymce" type="module" />

</xar:if> 

This inserts the custom configuration definition into your page. (It also inserts the default configuration, etc. You can see what's inserted by doing a View Source of the page in your browser when we're done).

Alternatively you can override the showinput-textarea.xt template with a copy of showinput-tinymce.xd, as explained in the tinymce Install Options config page.

4. Tag the Field(s) which will use your configuration

In this example we're going to use our new configuration on the body field.

You must replace the default way of referencing the body textarea field in BL (block layout) with a regular <textarea> html tag. You cannot use the BL <xar:articles-field> tag. For example,

<textarea class="simpleEditorConfig" rows="10" cols="50" id="body" name="body" tabindex="0"></textarea>

Thus, the template might read:

        <xar:foreach in="$fields" value="$field">

<div class="xar-form-input-wrapper">

<label class="help xar-form-label" title="#$field['label']#" for="#$field['id']#">#$field['label']#</label>

<xar:if condition="$field['label'] eq 'body'>

<textarea class="simpleEditorConfig" rows="10" cols="50" id="body" name="body" tabindex="0">#$fields['body']['definition']['value']#</textarea>

<xar:else />

<xar:articles-field definition="$field['definition']" />

</xar:if>

</div>

</xar:foreach> 

That should do it!