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

...

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

...

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.

...

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.

...