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.

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. Outputs "tinymce.tpl.html" to pass settings to output for further processing.

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. This file uses results from "list.php".

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 these tasks but puts options into output of functions. These results are then in turn passed to template files.

list.php

This file computes link, image, flash and media lists for tinyMCE. Flash lists do not work however because the flash plugin is gone in tinyMCE 3.

config.php

Small configuration file to include a few basic files and to get a database connection. Used inside "editor.php" and "list.php".

con_tiny.js

JavaScript that defines "Con.Tiny". This file applies the settings specified in template files by passing them to tinyMCE.

Another purpose of this file is directly integrating tinyMCE into contenido. As such it registers Contenido's own image and file browser and deals with element focus in browser.

con_tiny.css

CSS to adjust look of tinyMCE.

tiny_mce_gzip.php

This file compresses the TinyMCE JavaScript using GZip and enables the browser to do two requests instead of one for each .js file.

tiny_mce_gzip.js

This file is dead. If content should be gzip compressed the file is search inside jscripts/tiny_mce but it is in the same folder where jscripts resides. If it is called it will invoke tiny_mce_gzip.php for compression.

Upgrades

- Download the latest TinyMCE release from http://tinymce.moxiecode.com/download.php
The basic structure is
tinymce/
|-- docs
|-- examples
`-- jscripts

• Download the latest TinyMCE release from http://tinymce.moxiecode.com/download.php
  The basic structure is
  tinymce/
  |-- docs
  |-- examples
  `-- jscripts
  
  
• Replace directory jscripts/ of the new release with directory /contenido/external/wysiwyg/tinymce3/jscripts/
• Replace file jscripts/changelog with /contenido/external/wysiwyg/tinymce3/jscripts/changelog
• Replace file jscripts/readme with /contenido/external/wysiwyg/tinymce3/jscripts/readme
  
  

• Because language packs are no longer included with the core distribution download
  language packs from http://tinymce.moxiecode.com/download.php

• Copy the language packs into directory /contenido/external/wysiwyg/tinymce3/jscripts/

• Download the compressor files from http://www.tinymce.com/download/compressors.php

• Put "tiny_mce_gzip.js" into /contenido/external/wysiwyg/tinymce3/jscripts/tinymce/ but do not overwrite tiny_mce_gzip.php (contenido file)

• Inherit the changes in file ./contenido/external/wysiwyg/tinymce3/jscripts/tiny_mce/plugins/advlink/js/advlink.js (see below)

Contenido modifications of the TinyMCE WYSIWYG editor

There are a few changes made to TinyMCE 3 to integrate it into Contenido's backend.

The plugin advlink has been modified.

Function getAnchorListHTML in file ./contenido/external/wysiwyg/tinymce3/jscripts/tiny_mce/plugins/advlink/js/advlink.js hase been changed. The anchor value has now the form front_content.php?idart=112#anchor_name instead of #anchor_name.

Note, that for V3.x it is in js/advlink.js, instead of jscripts/functions.js!

  function getAnchorListHTML(id, target) {
    var inst = tinyMCEPopup.editor;
    var nodes = inst.dom.select('a.mceItemAnchor,img.mceItemAnchor'), name, i;
    var html = "";
    html += '<select id="' + id + '" name="' + id + '" class="mceAnchorList" o2nfocus="tinyMCE.addSelectAccessibility(event, this, window);" onchange="this.form.' + target + '.value=';
    html += 'this.options[this.selectedIndex].value;">';
    html += '<option value="">---</option>';
    for (i=0; i<nodes.length; i++) {
        // CONTENIDO MODIFICATION 24.10.2006 Willi Man
        if ((name = inst.dom.getAttrib(nodes[i], "name")) != "")
            html += '<option value="' + tinyMCE.settings['article_url_suffix'] + '#' + name + '">' + name + '</option>';
    }
    html += '</select>';
    return html;
  }

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.

The settings are already documented as part of backend customizing and settings.