Development Wysiwyg Editor
Contrexx uses CKeditor with version 4 as WYSIWYG editor.
Contents
since Contrexx version 3.1
Types
There are multiple editor configurations Contrexx provides:
| Type | Description | Available functions |
|---|---|---|
| full | The full functionality editor for complex contents. (With possibility to edit sourcecode) |
Sourcecode |
| 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. |
Sourcecode |
Editors in use
Backend
| 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 |
Frontend
| 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 |
Plugins
CKEditor has been built using the CKEditor Builder
ExtraPlugins (not included within the package)
BBCode (http://ckeditor.com/addon/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
\Cx\Core\Wysiwyg\Wysiwyg
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
$objTemplate->setVariable(array(
'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().
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)
