Introduction
TinyMCE is an open source editor that is integrated into Contenido's backend to help authors entering and formatting text. This article is about how its integration is implemented.
Usage
The editor is used in several files. Here is the list of the files and what they are responsible for.
| File name | Purpose | Called tinymce/wrapper part |
|---|---|---|
| include_con_content_list.php | Displays raw data of articles | editorclass.php |
| template.con_content_list.html | Template included by include_con_content_list.php to render its page | con_tiny.js, tiny_mce.js |
| include.con_editcontent.php | Displays the editor page of article | editorclass.php |
| template.con_editcontent.html | Template included by include.con_editcontent.php to render its page | con_tiny.js, tiny_mce.js |
| include.CMS_HTML.php | Editor page for content type CMS_HTML | editor.php |
| include.CMS_HTMLHEAD.php | Editor page for content type CMS_HTMLHEAD | editor.php |
This means editing any CMS_HTML or CMS_HTMLHEAD type 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.
editorclass.php
This file defines the class cTinyMCEEditor which extends cWYSIWYGEditor. It configures TinyMCE so that the editor does fit nicely into Contenido. To achieve such a task a lot of settings have passed to TinyMCE.
Here is a short list of tasks cTinyMCEEditor deals with:
- Adjusts toolbars and plugins to editing contexts
- Converts URLs to be not relative
- Configures source formatting
- Tells tinyMCE which elements on page should be editors
- Sets editor language and text direction
- Handles gzip content compression
- Sets look (e.g. theme, stylesheets)
- Specifies which input elements are valid
As TinyMCE is based on JavaScript this file does not directly do this but puts options into output of functions.
con_tiny.js
JavaScript that defines "Con.Tiny".
con_tiny.css
CSS to adjust look of tinyMCE.
Interfaces/Dependencies
Often "editor.php" is called
Contendido wraps TinyMCE inside a JavaScript class named "Con.Tiny". This class hides a bit complexity from the
Changes to TinyMCE
There are a few changes made to TinyMCE 3 to integrate it into Contenido's backend.
Settings
TinyMCE is quite configurable. Settings for TinyMCE are internally obtained by Contenido's getEffectiveSetting function. This means the editor is configured in the following order of priority (highest first): User, group, client (language), client and system.