
= MDE Rich Text Configuration =


MDE Rich Text Configuration is set of key/value structure that allows to configure the underlying [[http://www.ckeditor.com|CKEditor]] component.
The configuration allows to customize the editor and adding new features. For more information, please refers to [[https://docs.ckeditor.com/#!/guide/dev_configuration|setting configuration]] and [[https://docs.ckeditor.com/#!/api/CKEDITOR.config|CKEDITOR.config]] pages.

The implementation ''org.polarsys.kitalpha.richtext.nebula.widget.MDENebulaRichTextConfiguration'' is an extension of ''org.eclipse.nebula.widgets.richtext.RichTextEditorConfiguration'' and it is aware of default configuration of the MDE Rich Text Editor.

The default configuration is located in Javascript resource in ''org.polarsys.kitalpha.richtext.nebula.widget/resources/config.js''. The configuration specify that the widget allows all content, activate the native spell checker of the editor, encode special characters in serialized format...

The resource is setted in configuration with ''customConfig'' key and fully path to config.js.

The MDERichTextConfiguration provides facilities to configure the toolbar by adding items, to set position of the toolbar in widget...

A set of keys which allows to configure the widget are listed in ''org.polarsys.kitalpha.richtext.nebula.widget.MDERichTextConstants''


==== Toolbar configuration ====

The easy way to configure the toolbar is to use the dedicated method to add items to groups. the method is initializeToolbarItem(String toolbar, String... items);

After that, the configuration is transformed to the following patterns:

<source lang="Javascript" enclose="none">
[{name: toolbar1, groups = [ items1, items2... ]}, {name: toolbar2, groups = [ items3... ]}]
</source>

After the transformation, the key ''TOOLBAR_GROUPS'' to the result.


=== Examples ===


==== Add group of items to toolbar ====

This snippet add style group to toolbar.

<source lang="Java" enclose="none">
	final MDENebulaRichTextConfiguration configuration;
	configuration.initializeToolbarItem(MDERichTextConstants.STYLES_TOOLBAR);
</source>
[[File:../../img/richtext_config_style_toolbar.png|Add group of items to the toolbar|frameless|600px]]



==== Change the position and the color of the toolbar  ====

This snippet shows how to configure the position toolbar and the color of the toolbar

<source lang="Java" enclose="none">
	final MDENebulaRichTextConfiguration configuration;
	configuration.initializeToolbarItem(MDERichTextConstants.BASIC_STYLES);
	configuration.setOption(MDERichTextConstants.TOOLBAR_POSITION, MDERichTextConstants.TOOLBAR_POSITION_BOTTOM);
	configuration.setOption(MDERichTextConstants.UI_COLOR, "#AAAAFF");
</source>
[[File:../../img/richtext_config_style_toolbar_color.png|Add group of items to the toolbar|frameless|600px]]
