Tips & Tricks - TinyMCE - Custom toolbar

In this workshop you will discover how you can create custom toolbar configurations for text areas that use the TinyMCE editor. Go to the portal directory internal/cfg/htmleditor/tinymce. Create a new file with the file extension .xml (e.g. customConfig.xml). Open this file in a text editor of your choice and insert the following lines:

<?xml version="1.0" encoding="UTF-8"?><toolbarbutton-panel>   <property>      <title de="Meine Toolbar" en=" My Toolbar "/>   </property>   <toolbarbutton-row>      <toolbarbutton name="help" type="standard"/>   </toolbarbutton-row></toolbarbutton-panel>

It is important that the element <toolbarbutton-row> initially contains at least one element, in this example <toolbarbutton>. In the row

<title de="Meine Toolbar" en=" My Toolbar "/>

you can change the name of the toolbar configuration. Then save the file. Switch to the Applications module and create a new application. Create a text area on this page. In the properties dialog of the text area switch to the Options tab.

Click on "Load default configuration".

Afterwards, you can put together your custom configuration ("Selected buttons" list). After you have put together the desired button, close the dialog by clicking on "OK". Select the text area and open the Details dialog by pressing F4. Switch to the XML tab.

Copy the entire text within the element <toolbarbutton-panel>. Insert this into the "customConfig.xml" file in the text editor instead of the previous <toolbarbutton-row> element. The file looks like this in our example:

<?xml version="1.0" encoding="UTF-8"?><toolbarbutton-panel>   <property>      <title de="Meine Toolbar" en=" My Toolbar "/>   </property>   <toolbarbutton-row>	<toolbarbutton name="bold" type="standard"/>	<toolbarbutton name="italic" type="standard"/>	<toolbarbutton name="underline" type="standard"/>   </toolbarbutton-row></toolbarbutton-panel>

Save the file and close the editor.

From now on, this configuration can be selected in every text area with "Editor mode" in every portal application.