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

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