How to add a rich text editor (RTE) to an Umbraco macro?
In my previous article, I shared with you how to add a dropdown to an Umbraco macro. This time, I’ll be sharing how to add a rich text editor and why. The answer to “why?” is because I believe it is really important to give editors the ability to add links, apply styles, or just add bold or italic to the content of the macro (if that makes sense in the specific macro’s context).
For this exercise, we will be developing the warning text component (documentation here). You can also check the complete design system documentation that we (West Midlands Combined Authority) developed as a basis of our projects.
So, this macro will only have two parameters: one to choose the icon and the other to insert the message (content). We will be using the dropdown developed in the last article and we will be creating a rich text editor to be used inside macros whenever we want/need.
If you followed the steps of my previous article, you should already have the dropdown files and you only need to create the package.manifest for it. What is suggest is to create a new folder inside the macroParametersEditors with a name of your choice and add to it the package.manifest.
On the other hand, if you didn’t read my previous article, you can just grab these two files from there: dropdown.controller.js and dropdown.html. Make sure their location match with package.manifest URLs.
The other parameter that we want on this macro is a rich text editor that unfortunately doesn’t appear as default. However, this is simpler than dropdown as you don’t need to customise it (as the content is what editors decide and not options that we gave editors to choose from). We’ll only need to have a package.manifest connected to the default rich text editor view. If you wish, you also can control its settings (toolbar, height, width, icon, etc.) as the example below. I suggest having this file inside organized folders like this: App_Plugins/macroParametersEditors/richTextEditor/ but since it is inside App_Plugins folder it will work.
Now, you should be able to find both options (warning icon dropdown and rich text editor) in your parameter options.
To have it rendering I will share with you the partial file connected to the macro, which in my case is named WarningText.cshtml.
I hope it was helpful!
