Blog

Read About What We Love: Web Development & Technologies

How to make plugins work for RTE in Umbraco 7

Those of you working with Umbraco 7 must have noticed that there are no plugins available to customise RichText Editor (RTE). The plugins available for Umbraco 6 RTE no longer seem to be working in the latest version, so far.

We were faced with this problem when a client requirement came to the fore for insertion of Font Awesome icons into the RTE. We found two plugins that were very close – one let you embed YouTube tags; the other let you insert custom value through dropdown. But we found even these plugins did not work in Umbraco 7.

Umbraco uses TinyMCE as its RTE. Version 6 of the CMS uses TinyMCE version 3.x, however, Umbraco 7 uses TinyMCE version 4.x in as its RTE.  The functions used for Tiny MCE version 3 are obsolete for version 4. This means they do not work and new functions available for TinyMCE version 4 have to be used. The other reason why Umbraco 6 plugins for RTE don’t work on Umbraco 7 is the folder location of the package code. In Umbraco, usually the package code would be placed in the folder umbraco_client but for the RTE plugin to work in Umbraco 7 the folder plugin code has to be placed under the folder named Umbraco (umbraco/lib/tinymce/plugins/your-folder). 

If you want to develop a plugin for RTE you can follow the steps we did to insert Font Awesome 

1. Create a folder with your plugin name under the following path. E.g:      umbraco/lib/tinymce/plugins/fontawesome

2. Have files plugin.js and plugin.mis.js with your custom code and any other files required like .htm page with required HTML, img folder with gif icon etc.

3. Change the functions of TinyMCE version 3 to version 4, very good documentation is available on the TinyMCE site. Here is the code to insert values into RTE in TinyMCE 4. 

E.g. top.tinymce.activeEditor.insertContent('<i class="fa fa-edge'"> </i>');

4. Change the tinymce.config file in config folder by adding the following:

       <command>

        <umbracoAlias>fontawesome</umbracoAlias>

        <icon>images/editor/fontawesome.gif</icon>

          <tinyMceCommand value="" userInterface="false" frontendCommand="fontawesome">fontawesome</tinyMceCommand>

       <priority>75</priority>

      </command>

Note: folder name and command name should be same.

              Under plugin section add this

<plugin loadOnFrontend="true">fontawesome</plugin>

If you are using any tags not allowed in TinyMCE like i tag then make the change for validElements in config to allow this.

5. Then in Umbraco back office, under data types go to data type Richtext editor, check your command to see it in RTE.

Add the Fontawesome related style sheets and enable the same in Richtext editor datatype, to be able to see font awesome icons inside the RTE.

Kiran Kumar | Umbraco Expert Developer  

Elizabeth Raj | Blogger

Leave A Comment

Aix-en-Provence – Bangalore – Montreal

We love diversity and we work out of 3 fabulous cities, on 3 continents, and 3 time zones.


Contact us
We’ll get in touch with you ASAP!