Development Wysiwyg Editor

From Cloudrexx Development Wiki
Jump to: navigation, search
This article must be updated for Cloudrexx Download

Contrexx uses CKeditor with version 4 as WYSIWYG editor.

since Contrexx version 3.1


There are multiple editor configurations Contrexx provides:

Type Description Available functions
full The full functionality editor for complex contents. (With possibility to edit sourcecode)

New site
Cut / Copy / Paste
Spell check
Undo / Redo
Find / Replace
Mark all
Reset formatting
Bold / Italic / Underlined / Struck through
Superscript / Subscript
Numbered- und unnumbered list
More / less indention
Link / Anker
Horizontal line
Special characters
Text formatting
Text- und background colors
Show blocks (Divs as dashed lines and so on)
Fullscreen mode
Div assistent

fullpage The full functionality editor. Used to edit a whole HTML structure including <html>,<head> and <body> tags. Same functionalities like "full".
small The full functionality editor. The editor isn't as height as the full editor. Same functionalities like "full".
bbcode Used to let user insert data.

Undo / Redo
Find / Replace
Mark all
Reset formatting
Bold / Italic / Underlined
Special characters

Editors in use


Module Function Field Editor type
Content manager Enter / Edit a page Content Full
Core Edit mail template HTML Fullpage
Core SettingDB Configuration Small
User management Edit mail template HTML Fullpage
Contact Edit a form Text up above the form, Feedback text Small
Contact Edit a form Mail template Fullpage
News Edit teaser template HTML Full
News Add / Edit entry News text Full
Blog Add / Edit blog entry Content Full
Blog Edit comment Text BBCode
Calendar Edit event Description Full
Calendar Edit mail HTML Full
Checkout Edit mail HTML Full
CRM Edit deal Payment information / Description Small
CRM Edit note Content Small
CRM Edit task Task description Small
Data Add / Edit entry Content Full
Docsystem Add / Edit entry Content Full
Egov Edit product Description / Message Full
Jobs Add / Edit Job Description Full
Knowledge Edit article Content Full
Mediadir Entering form data WYSIWYG Small
Newsletter Edit mail Content Full
Newsletter Edit mail template HTML FullPage
Partners Add / Edit partner Description Small
Popup Edit Content Full
Shop Edit product Short description Small
Shop Edit product Long description Full
U2U Settings Private message Full


Module Function Field Editor type
News Add entry News text BBCode
Blog Add comment Text BBCode
Forum Add thread / comment Text BBCode
U2U Private message Message BBCode


CKEditor has been built using the CKEditor Builder

Plugin Information Integration
Basic Styles Build-in
BBCode output format ExtraPlugin
Blockquote Build-in
Clipboard Build-in
CodeMirror (Source) Syntax Highlighting ExtraPlugin
Color Button Build-in
Content Templates Build-in
Context Menu Build-in
Dialog Build-in
Dialog User Interface Build-in
Div Container Manager Build-in
Editor Resize Build-in
Editor Toolbar Build-in
Elements Path Build-in
Enter Key Build-in
Escape HTML Entities Build-in
Fake Objects Build-in
File Browser Build-in
Find / Replace Build-in
Flash Dialog Build-in
Floating Panel Build-in
Floating Space Build-in
Format Build-in
Horizontal Rule Build-in
HTML Output Writer Build-in
IFrame Dialog Build-in
IFrame Editing Area Build-in
Image Build-in
Indent / Outdent Build-in
Indent List Build-in
Insert Smiley Build-in
Justify Build-in
Link Build-in
List Build-in
List Block Build-in
List Style Build-in
Magic Line Build-in
Maximize Build-in
Menu Build-in
Menu Button Build-in
New Page Build-in
Panel Build-in
Panel Button Build-in
Paste As Plain Text Build-in
Paste from Word Build-in
Popup Build-in
Preview Build-in
Remove Format Build-in
Rich Combo Build-in
Select All Build-in
Show Blocks Build-in
Show Table Borders Build-in
Source Editing Area Build-in
Special Characters Build-in
SpellCheckAsYouType (SCAYT) Build-in
Styles Combo Build-in
Tab Key Handling Build-in
Table Build-in
Table Resize Build-in
Table Tools Build-in
UI Button Build-in
Undo Build-in
WebSpellChecker Build-in

ExtraPlugins (not included within the package)

BBCode ( does allow to handle BBCode.

Howto install an extra plugin

Download the plugin into the folder /lib/ckeditor/plugins. After that you have to activate it in the file /core/Wysiwyg/Wysiwyg.class.php for the editor which should use this plugin.

private $types = array(
    'small' => array(
        'toolbar' => 'Small',
        'width' => '100%',
        'height' => 200,
        'fullPage' => 'false',
        'extraPlugins' => array(),
    'full' => array(
        'toolbar' => 'Full',
        'width' => '100%',
        'height' => 450,
        'fullPage' => 'false',
        'extraPlugins' => array(),
    'fullpage' => array(
        'toolbar' => 'Full',
        'width' => '100%',
        'height' => 450,
        'fullPage' => 'true',
        'extraPlugins' => array(),
    'bbcode' => array(
        'toolbar' => 'BBCode',
        'width' => '100%',
        'height' => 200,
        'fullPage' => 'false',
        'extraPlugins' => array('bbcode'),

An example does exist for the editor type bbcode. There the extra plugin 'bbcode' has been activated.

Add content templates

See knowledge base.


The Wysiwyg class does facilitate the implementation of a CKeditor while developing modules.

public function __construct($name, $value = "", $type = "small", $langId = null, $extraPlugins = array())

$name (string) is the content of the HTML attribute "name".
$value (string) is the content of the HTML attribute "value".
$type (string) can take the values: bbcode, small, full. default is "small". (take a look at the types up above)
$langId (integer) default is the constant FRONTEND_LANG_ID.
$extraPlugins (array) there extra plugins can be deactivated. z.B. array('bbcode')

Code example for WYSIWYG implementation

    'MODULE_WYSIWYG_DESCRIPTION' => new \Cx\Core\Wysiwyg\Wysiwyg('description', contrexx_raw2xhtml($htmlCode), 'full'),

The inserted text can be evaluated with the following code:

$description = contrexx_input2raw($_POST['description']);

Format (BBCode / HTML)

If the WYSIWYG editor is used with the type bbcode, the data will be BBCode formatted in the $_POST array. It is recommended to save the data as BBCode to the database.

Example code:

$datenbankValue = \Cx\Core\Wysiwyg\Wysiwyg::prepareBBCodeForDb($_POST['formField']);

For the output as HTML you only need to use the method prepareBBCodeForOutput():

$htmlCode = \Cx\Core\Wysiwyg\Wysiwyg::prepareBBCodeForOutput($datenbankValue);

Toolbar configurator

The toolbar configurator allows the creation of individual WYSIWYG editor toolbars.

Initiating a new Toolbar Configurator instance

$toolbarConfigurator = new \Cx\Core\Wysiwyg\Controller\ToolbarController(\Cx\Core\Core\Controller\Cx::instanciate());

The parameter is mandatory and cannot be left empty.

Using the toolbar configurator

To add a toolbar configurator to the view, the toolbar controller provides the getToolbarConfiguratorTemplate.

$toolbarConfiguratorTemplate = $toolbarConfigurator->getToolbarConfiguratorTemplate('/core/Core/Wysiwyg', false);

The first parameter specifies the path to the toolbar configurator template and the second parameter wraps the toolbar configurator in a form tag

Storing the toolbar

The generated toolbar configurator template will send the disabled editor functions as a POST-parameter with the name removedButtons.
The current implementation of the different toolbars does not support this syntax though. Therefore, the toolbar controller provides the method getAsOldSyntax.

By passing the removed buttons string and the type of toolbar the user customized into the method you will get the old syntax json encoded returned.

$toolbarFunctions = $toolbarConfigurator->getAsOldSyntax($_POST['removedButtons'], 'full');

The second parameter can be one of the following values: small, full, bbcode, frontendEditingContent or frontendEditingTitle.
The returned value can then be stored in the core_wysiwyg_toolbar-table, which uses just the old syntax and the removed buttons as values.

Loading the toolbar

In the ckeditor.config.js.php file located under /core/Core/Wysiwyg/ are the old syntaxes for the different toolbars. Replace the old syntax with the following call config.toolbar_full = <?php $wysiwyg->getFullToolbar() ?>; The shown code is an example. The call may vary and if necessary an additional method can be added to the \Cx\Core\Wysiwyg\Controller\ComponentController.

Additional method

To enhance the user experience, the toolbar configurator provides a method to deselect functions while editing an existing toolbar.
By calling getRemovedButtons you will receive a string containing each function that has been disabled.
Be aware that the string is built based on the default and the user group configuration.

Default implementation

The toolbar configurator is currently available in the WYSIWYG-settings and in the user group management.
For further instructions on how to use these configurators view this FAQ entry:

till Contrexx version 3.1

An instance of an editor can be printed with the global function get_wysiwyg_editor().


This function looks like this:

get_wysiwyg_editor($name, $value = , $mode = , $languageId = null, $absoluteURIs = false)

$name (string) contains the content of the HTML attribute "name".
$value (string) contains the content of the HTML attribute "value".
$langId (integer) the default is the constant FRONTEND_LANG_ID.
$absoluteURIs (boolean) only used for the file browser. If set to TRUE, the images will be inserted with the absolute path (incl. domain and protocol)