...

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".

...

JavaScript that defines "Con.Tiny". Uses its passed through settings and options to initialise Tinymce 4 and defines the callback functions of standard values. It also defines the "close" plugin for the inline editor that adds a save and close button to the inline editor toolbar. As the users may insert images or videos this script integrates Contenido's image and file browsers into Tinymce.

Loading plugins from clients folder

You may choose between two options:

Load all plugins in default folder

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. Contenido tries to load the following files in each plugin "plugin.min.js" and then "plugin.js". If either of these files is found they are loaded into Tinymce.

Add config variable "tinymce4" -> "contenido_load_client_plugins" with content "true".

Add config variable "tinymce4" -> "contenido_load_all_client_plugins" with content "true".

Load only specific plugins in client folder

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.

...

Configuration

Tinymce 4 can be configured through the page at Administration -> System -> WYSIWYG.

There are separate settings available for dedicated editor page, inline editor and inline editor in fullscreen mode

Image Added

Image Added

Image Added

You may also activate the contenido_gzip option (but this is not recommended because web server should be serving compressed content already).

If you activate the jump lists for image and links then users have a dropdown menu available when opening image and link dialogs, providing quick access to images and links. This option will be slow for links with many pages and categories and image list creation will be slow when there are many different images available. By default these options are turned off.

Load external plugins

You can add custom plugins to tinymce 4 using the "External plugins to load" entry. Name should be the name of the plugin and URL is the URL TinyMCE 4 will try to load dynamically using AJAX.

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).

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.