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

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
New site
Templates
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
Quote
Link / Anker
Image
Flash
Table
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.

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

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

Plugin Information Integration
Basic Styles http://ckeditor.com/addon/basicstyles Build-in
BBCode output format http://ckeditor.com/addon/bbcode ExtraPlugin
Blockquote http://ckeditor.com/addon/blockquote Build-in
Clipboard http://ckeditor.com/addon/clipboard Build-in
CodeMirror (Source) Syntax Highlighting http://ckeditor.com/addon/codemirror ExtraPlugin
Color Button http://ckeditor.com/addon/colorbutton Build-in
Content Templates http://ckeditor.com/addon/templates Build-in
Context Menu http://ckeditor.com/addon/contextmenu Build-in
Dialog http://ckeditor.com/addon/dialog Build-in
Dialog User Interface http://ckeditor.com/addon/dialogui Build-in
Div Container Manager http://ckeditor.com/addon/div Build-in
Editor Resize http://ckeditor.com/addon/resize Build-in
Editor Toolbar http://ckeditor.com/addon/toolbar Build-in
Elements Path http://ckeditor.com/addon/elementspath Build-in
Enter Key http://ckeditor.com/addon/enterkey Build-in
Escape HTML Entities http://ckeditor.com/addon/entities Build-in
Fake Objects http://ckeditor.com/addon/fakeobjects Build-in
File Browser http://ckeditor.com/addon/filebrowser Build-in
Find / Replace http://ckeditor.com/addon/find Build-in
Flash Dialog http://ckeditor.com/addon/flash Build-in
Floating Panel http://ckeditor.com/addon/floatpanel Build-in
Floating Space http://ckeditor.com/addon/floatingspace Build-in
Format http://ckeditor.com/addon/format Build-in
Horizontal Rule http://ckeditor.com/addon/horizontalrule Build-in
HTML Output Writer http://ckeditor.com/addon/htmlwriter Build-in
IFrame Dialog http://ckeditor.com/addon/iframe Build-in
IFrame Editing Area http://ckeditor.com/addon/wysiwygarea Build-in
Image http://ckeditor.com/addon/image Build-in
Indent / Outdent http://ckeditor.com/addon/indent Build-in
Indent List http://ckeditor.com/addon/indentlist Build-in
Insert Smiley http://ckeditor.com/addon/smiley Build-in
Justify http://ckeditor.com/addon/justify Build-in
Link http://ckeditor.com/addon/link Build-in
List http://ckeditor.com/addon/list Build-in
List Block http://ckeditor.com/addon/listblock Build-in
List Style http://ckeditor.com/addon/liststyle Build-in
Magic Line http://ckeditor.com/addon/magicline Build-in
Maximize http://ckeditor.com/addon/maximize Build-in
Menu http://ckeditor.com/addon/menu Build-in
Menu Button http://ckeditor.com/addon/menubutton Build-in
New Page http://ckeditor.com/addon/newpage Build-in
Panel http://ckeditor.com/addon/panel Build-in
Panel Button http://ckeditor.com/addon/panelbutton Build-in
Paste As Plain Text http://ckeditor.com/addon/pastetext Build-in
Paste from Word http://ckeditor.com/addon/pastefromword Build-in
Popup http://ckeditor.com/addon/popup Build-in
Preview http://ckeditor.com/addon/preview Build-in
Remove Format http://ckeditor.com/addon/removeformat Build-in
Rich Combo http://ckeditor.com/addon/richcombo Build-in
Select All http://ckeditor.com/addon/selectall Build-in
Show Blocks http://ckeditor.com/addon/showblocks Build-in
Show Table Borders http://ckeditor.com/addon/showborders Build-in
Source Editing Area http://ckeditor.com/addon/sourcearea Build-in
Special Characters http://ckeditor.com/addon/specialchar Build-in
SpellCheckAsYouType (SCAYT) http://ckeditor.com/addon/scayt Build-in
Styles Combo http://ckeditor.com/addon/stylescombo Build-in
Tab Key Handling http://ckeditor.com/addon/tab Build-in
Table http://ckeditor.com/addon/table Build-in
Table Resize http://ckeditor.com/addon/tableresize Build-in
Table Tools http://ckeditor.com/addon/tabletools Build-in
UI Button http://ckeditor.com/addon/button Build-in
Undo http://ckeditor.com/addon/undo Build-in
WebSpellChecker http://ckeditor.com/addon/wsc Build-in

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

See knowledge base.

\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)