Tweaking the Richtext Editor

Jens Bothe02. Oct 2012 | ConsultingDevelopmentModifications & Packages

OTRS uses the CKEditor for editing richtext in tickets, Changes, FAQs and other input fields. Typically customers ask for some features which are not switched on by default. An easy way for creating and editing HTML tables is one of them.

As there is no config setting in OTRS yet I will show a small hack to get an enhanced toolbar with some additional features and a different grouping of the items. The features I added are:

• Table
• Search & Replace
• Select All
• Subscript and Superscript
• Show Blocks
• Paste as Text and Paste From Word

After the modifications the CKEditor Full Toolbar looks like this

And the Simple Toolbar like this

In OTRS 3.1 you need to edit the file Kernel/Output/HTML/Standard/RichTextEditor.dtl where the toolbar is declared for ticket actions (RichText.ToolbarFull) and other like change or notifications (ToolbarSimple).  In upcoming OTRS 3.2 you can place the file in the Custom directory which will be more convenient on updates.

The code needs to be changed as follows

Core.Config.Set('RichText.ToolbarFull', [
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript','Superscript' ],
['NumberedList', 'BulletedList', 'Table', 'Image', 'HorizontalRule', 'PasteText','PasteFromWord'],
['Outdent', 'Indent', '-', 'JustifyLeft', 'Justif yCenter', 'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink'], 
['Find', 'Replace'],
['SpellCheck'], 
'/',
['Format', 'Font', 'FontSize', '-', 'TextColor', 'BGColor'],
['Undo', 'Redo', 'SelectAll', 'RemoveFormat'],
['ShowBlocks', 'Source', ]
   ]);
Core.Config.Set('RichText.ToolbarSimple', [
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript','Superscript' ],
['NumberedList', 'BulletedList', 'Table', 'HorizontalRule','PasteText','PasteFromWord'],
['Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter',  'JustifyRight', 'JustifyBlock'],
['Link', 'Unlink'],
['Find', 'Replace'],
['SpellCheck'], 
'/', 
['Format', 'Font', 'FontSize', '-', 'TextColor', 'BGColor'],
['Undo', 'Redo', 'SelectAll', 'RemoveFormat'],
['ShowBlocks', 'Source', ]
    ]);

• 7