Document editor

Continuum CMS has support for different text editors through the use of a driver/adapter architecture. The sections below will guide you through how to add a new editor.

Code Library

Location

Jadu recommend adding the new editors code library to the public_html/jadu/custom directory as this will prevent issues during patches. For extra clarity it could be placed in a editors sub directory.

New Buttons

If your editor comes with new functionality and buttons then these will need to be added into the database. The best way to do this is via a database migration as this allows any changes to be easily reverted if needed. Not only will the Continuum CMS database need updating but any Galaxies site database will also need updating.

There are already 2 migrations in the Jadu Core code base that can be copied and modify for your editor. One of these migrations updates the main db and the other updates any existing galaxies databases.

Adapter

Your new adapter will need to implement UI\Editor\AdapterInterface.

A list of the required methods and their purpose is below:

  • __construct(\Jadu_Service_Container $jadu)

    • Sets up the class
    • Used by the xinha and ckeditor adapters to load the config and populate the directory, getData and setData properties
  • getDirectory()

    • Returns the directory where the editors library
  • addEditorJavascript()

    • Adds any javascript files required by the editor to be output to the page
    • The method addJavascript("path/to/file.js") should be used for this
  • addEditorCSS()

    • Adds any css scripts required by the editor to be output to the page
    • the method addCSS("path/to/file.css") should be used for this
  • getEditorMarkup($name, $value, $id, $loadConfig)

    • Returns the html markup to be included on the page.
    • $name is the value to put into the name attribute.
    • $value is the value to be put into the value attribute.
    • $id is the value to be into the id attribute.
    • $loadConfig whether to load a config file within the markup
  • getImageManagerCallback()

    • Returns the javascript to be used as a callback for inserting an image
  • getAutoSaveOpening()

    • Opening javascript that listens for the editor to be ready
  • getAutoSaveClosing()

    • The closing javascript to the javascript from getAutoSaveOpening
    • Is usualy a }
  • getEditorInstanceJS($instance)

    • returns javascript used to get an instance of the editor
  • getEditorGetDataMethodJS()

    • Returns the javascript methods used by the editor to get it's contents
  • getEditorSetDataMethodJS()

    • Returns the javascript methods used by the editor to set it's contents
  • getJavaScriptToCleanHtmlAndUpdateTextAreaTag()

    • This creates the generic_editor_tag_updater.cleanHtmlAndUpdateTag function.
    • it's purpose is to clean the html in the editor and then update the text tag
  • getJavaScriptToInitiateEditorOnWidget()

    • This creates the generic_editor_loader.loadEditor function in javascript that is added to the page.
    • It's purpose is to load the editor via javascript for use in lightboxes and widgets.
  • buildToolbar($buttons)

    • Returns the structure of the editors toolbar
    • $buttons is an array of DocumentEditorButton objects
  • getEditorButtonMapping($name = null)

    • $name DocumentEditorButton->editor_name to get a mapping for from config.xml or other mapping system.
    • Returns array of mapped data (See Config-buttons for more information)
      • available
      • mapping
      • icon

Configuration

As well as creating a new adapter you will need to create a config xml file for the editor you wish to use. The config will contain some key information about your choice of editor and will provide mappings for the buttons available in your editor.

We recommend making a copy of either ckeditor.xml.example or xinha.xml.example and modifying it to fit your editor. As this will ensure it has the required information. The structure of this file is explained below

Elements

directory

This element is the location of the library for the text editor in relation to /public_html/jadu/.

<directory>custom/editors/new_editor</directory>

getData

This element holds the name of the javascript method used to retrieve the contents of the editor.

<getData>getContent</getData>

setData

This element holds the name of the javscipt method used to set the contents of the editor.

<setData>setContent</setData>

buttons

Each child node represents an editor button and uses the editor_name value from the JaduDocumentEditorButtons table.

The mapping node allows document editor privileges to work between editors without the need to recreate them.

<buttons>
    <abbreviation>
        <available>false</available>
        <mapping></mapping>
        <icon></icon>
    </abbreviation>
    <blockquote>
        <available>true</available>
        <mapping>Blockquote</mapping>
        <icon>plugins/blockquote/icons/blockquote.png</icon>
    </blockquote>
        ...
</buttons>
Node Type Purpose
available boolean Is this button available for this editor
mapping string This editors name for this button
icon string path to buttons icon

Enabling the adapter

Enable the editor adapter by setting the constant CC_EDITOR_ADAPTER with the name of your adapter class.

Installed adapter values

Service Adapter name
Xinha
CKEditor \UI\Editor\Adapter\CKEditor

results matching ""

    No results matching ""