Extending rich text editor in Umbraco
I recently had a task that involved enabling complex html structure for the rich text editor in an Umbraco 8 project. We just could’nt find any way to implement this without asking the content editor to edit the raw html.
The solution we, decided to implement, was to enable the content editors to select and add to the RTE from a list of html pre-styled snippets. This will add a mock html with the required structure, but with some kind of Lorem Ipsum content, and allow the editor to change its content.
Now, there is nothing new here. This is a very simple TinyMCE plugin that is described here.
Also adding plugins to Umbraco should be very simple — look at this answer.
The issue is that I don’t like to edit the /umbraco folder, as it is usually part of our .gitignore (it is huge, and by default, being created as part of the UmbracoCms nuget package). Also this type of modification will probably be run over, during version upgrade.
So here is the solution I’ve used (probably different approaches exist).
The rich text editor is created using an array of resources. this array is injected into the RTEController as tinyMceAssets, which is an AngularJs Value. Now this requires a time travel to the ancient times of when the empire of AngularJS ruled the universe of Web Apps 5–6 years ago (sorry I did not really check when, but it feels longer since then than it actually is).
Values are a type of service that is usually created in the config period of the app, and can be injected to other codes during both the config, and run periods. It cannot be altered, but, fortunately, due to the nature of javascript array, it can be extended with additional resources .
So I created a plugin folder: ~/App_Plugins/tinymceExtend with the following package.manifest:
this tinymceextend.js goes as follows:
The reason I use $injector rather than injecting tinyMceAssets directly, is that during upgrade, this value doesn't exist.
And finally plugin.js :
The remaining of this is as usual:
Update the tinymce.config file to include our new plugin:
<plugin>snippets</plugin>and add it to the commands:
<command alias="snippets" name="Snippets" mode="All" />And finally (after building) check it in the back office for the selected Rich Text Editor Data type.
Second thoughts
After writing the first publication of the above, and using this pattern through an Umbraco version upgrade (8.6.4 to 8.8), I noticed that the original code under tinymceextend.js breaks the upgrade. The reason is that through the upgrade the angular.module(‘umbraco’) is being run without tinyMceAssets value.
So what we need to do is instead of injecting this value directly, injecting the factory object that is responsible for injecting stuff in AngularJs — $injector. So the above gist is actually revised.
As it seems nobody read this yet, so no harm done, probably….
Hope this was helpful.
