Tweaking the Richtext Editor

Jens Bothe02. Oct 2012 | ConsultingDevelopmentModifications & Packages

Disclaimer:

The practical examples presented in our technical blog (blog.otrs.com) and now in the expert category in our FAQ blog section serve as a source of ideas and documentation to show what is theoretically possible with OTRS in concrete scenarios or sometimes even for more exotic configurations. All configurations presented here were developed under laboratory conditions as a proof of concept. 

We can only guarantee testing and implementation of these concepts to be error-free and productive if implemented in a workshop with one of our OTRS consultants. Without this, the responsibility lies with the customer himself. Please note that configurations from older OTRS versions may not work in the newer ones.

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
Rodolfo López at 05.08.2019, 05:41

In Version 6 it's too very simple, go to Sysconfig and check enabled Frontend::RichText::EnhancedMode

#6
Gilles at 26.01.2017, 10:24

In Version 5 it's very simple, go to Core::Web and change Frontend::RichText::EnhancedMode from no to yes.

#5
Shane at 24.08.2016, 06:18

Try: Kernel/Output/HTML/Templates/Standard/RichTextEditor.tt

#4
Nils at 12.03.2016, 18:20

We want to use all the features mentioned above but we can not configure it. Can anbody help us or tell us the names from the configuration file or files in OTRS 5.0.7?

#3
Nils at 12.03.2016, 18:16

And for OTRS 5.0.7?

#2
Jens at 17.06.2014, 21:35

The article is for 3.1. and 3.2. In 3.3. it can be done via config.

#1
Quang Nguyen at 03.04.2014, 06:31

Hi Jens, This article is really interesting. However, as I am totally new to OTRS I cannot locate the RichText toolbar to edit it. I am using Turnkey OTRS version. Could you please guide me? Best regards, Quang

Your email address will not be published. Required fields are marked *