Introduction

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.

Settings

Toolbars

full

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

fullscreen

This is the editor on separate edit page. Apply tinymce settings through key "tinymce4_fullscreen".

simple

A simple toolbar without font and table options. Apply tinymce settings through key "tinymce4_simple". Not used at the moment.

mini

A very minimal toolbar, has only undo, redo, bold, italic, underline, strikethrough and link button. Apply settings through key "tinymce4_mini". Not used at the moment.

custom

A custom toolbar. Only tinymce settings through key "tinymce4_custom" are applied. Not used at the moment.

inline_edit

Toolbar of inline editor on edit and raw data tabs in Contenido's backend. Apply settings through key "tinymce4_inline".

default

The default toolbar is used if not specified otherwise in code. Apply settings through key "tinymce4_default". Not used at the moment.

Usage

The editor is used in several files. Here is the list of the files and what they are responsible for.

This means editing any CMS_HTML or CMS_HTMLHEAD type in Contenido's backend will bring up the WYSIWYG editor.

Contenido specific wrapper parts

class.wysiwyg_editor.php

Abstract class cWYSIWYGEditor for all WYSIWYG editors to be able to allow possible integration of other editors than tinyMCE in the future. This class is auto-loaded and thus always available.

editor.php

Called by Contenido's pre-defined content types that allow HTML markup. It first loads the editor class then sets the editor's width and height and injects a textarea tag into the output. Outputs "tinymce.tpl.html" to pass settings to output for further processing.

class.tinymce4.editor.php

Defines class cTinyMCE4Editor which extens the abstract cWYSIWYG editor class. It is autoloaded and handles PHP part of setup. As such it collects settings from backend and pre-processes it for later use in JavaScript. It is similar to Contenido's editorclass.php wrapper used by tinymce 3 but it is updated to tinymce 4's new settings and callbacks. Its return values are passed through the templates to the con_tiny.cs file.

class.tinymce_list.php

Builds image and link lists filled with objects related to database values for use in tinymce's image and link plugins.

con_tiny.js

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.

Example JSON file

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

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

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.

Replace the following folder with contents from downloaded package: "contenido/external/wysiwyg/tinymce4/tinymce".

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.

Replacement hints

Maybe you want to use tinymce's compat3x plugin to load the legacy code.

General

General: Make sure to use tinymce 4's windowManager in order to display model dialogs. Pass custom parameters like in their example to the new window. Their documentation mentions the setParams function to write into the variables you passed to the dialog during opening. Close the dialog window using the tinymce instance in the calling window, e.g. using "parent.tinymce.activeEditor.windowManager.close(window)". Bind the dialog instance you created using the open function of the windowManager using the on function of the instance to the close event.

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


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