...

Tinymce is an open source JavaScript WYSIWYG editor that is integrated into Contenido's backend to help authors entering and formatting text. This article is about how its integration is implemented.

Activation

TinyMCE 4 is not enabled by default. One has to manually enable TinyMCE 4 in CONTENIDO. We commend to use TinyMCE only in a new installation of CONTENIDO.

Where TinyMCE 4 can be enabled

Administration -> Users -> Properties -> User-defined properties

Area/Type: wysiwyg
Property: editor
Value: tinymce4

Administration -> System -> Add new variable

Administration -> Clients -> Client settings -> Choose wanted setting range -> Add new variable

Type: wysiwyg
Name: editor
Value: tinymce4

How to disable TinyMCE 4

Remove the settings at the places where you enabled TinyMCE 4. The default WYSIWYG editor in CONTENIDO will then be used.

Settings

Toolbars

full

This is the toolbar of inline-tinymce in fullscreen mode. Apply tinymce settings through key "tinymce4_full".

...

To load several plugins enter one plugin and save the form using the save button. One can then add another plugin. If more than 2 external plugins are wished then save the form and enter another one (the same applies for adding even more plugins).

Add the following path to your client folder: "external/wysiwyg/tinymce4/contenido/client_plugins/plugins".

Put the plugins (which are folders) to load inside the latter folder.

Add the following file to your client folder: "data/tinymce4config/clientplugins.json".

This file must contain a list of objects to load.

Example JSON file

Additional parameters (JSON passed to tinymce constructor)

 This is JSON merged into the main configuration. This content will be merged into the main configuration using PHP's array_merge function.

This example will replace the tinymce 4 inline editor config and configure toolbar2 to contain only the bold button.

[
	{
		"name": "test",
		"path": "/con_git/cms/external/wysiwyg/tinymce4/contenido/client_plugins/plugins/test/plugin.js",
	}
]

Buttons

To display a button in a toolbar you must add a config variable regarding to the toolbar state you want to modify.

For instance you may create the variable "tinymce4_fullscreen" "toolbar3" with value "test" to display only 1 button from the test plugin in the 3rd toolbar of fullscreen toolbar of inline-editor.

...

{
  "tinymce4_inline": {
    "toolbar2": "bold"
  }
}

Configuration file

 The configuration will be saved into the file config.wysiwyg_tinymce4.php in your config folder.

Raw content of configuration page will be saved into $cfg['wysiwyg']['tinymce4']['raw'] but configuration (with the additional parameters merged into config) passed to TinyMCE 4 is stored under the $cfg['wysiwyg']['tinymce4']['tinymce4'] key.

Upgrades

Download source code from Tinymce's website. If you want to be able to debug source code you need the development package, else use the standard packages. Contenido does not use the jQuery package.

...

If you've done it correctly the following path exists: "contenido/external/wysiwyg/tinymce4/tinymce/js". 

Writing own plugins

As some of the tinymce 3 plugins are gone (specifically advhr, advimage, advlink, inlinepopups, style and xhtmlxtras) you may want to write your own replacement plugins.

...

// open dialog
var diag = ed.windowManager.open({
    title: 'Your window title',
    url: 'url/to/load',
}, {
    oneCustomParameter: false
});

// handle close event of dialog
diag.on('close', function() {
    var args = ed.windowManager.getParams();
    // your code here
});

Update to latest Minor-Release

Downloads

To Update TinyMCE to the latest Minor-Version, download latest TinyMCE from here

You could also download languagepack if needed

Extract & Update

After downloading, unzip folder to your favorit location. You should now have a Folder named tinymce

Go to your contenido folder and browse to your tinymce4 folder

contenido/external/wysiwyg/tinymce4

Rename tinymce to tinymce_backup just to have a backup, in case somethings not working.

Copy/Upload the extracted folder to the previously browsed path so you have a new tinymce folder in your server stucture.