Computer Magic Logo
Add macro to RTE

Saturday, August 8, 2015

Published by Aristotelis Pitaridis

Umbraco allows us to add a macro as a content using the RTE (Rich Text Editor). In order to do it we have to enable this feature for our macro. The first thing that we have to do is to select the MyFirstMacro node from the node Macros of the Developer section.

The Macro properties will appear on the Screen. We scroll down and find the Editor settings.

We check the first checkbox which has the title "Use in rich text editor and the grid".

Now we click the Save button which is located at the upper right corner of the screen. The Macro is ready to use with the RTE. We open a Content with a Rich Text Editor property in order to show how to add the Macro. The last icon of the RTE is the "Insert macro".

When we click the "Insert macro" button the Macro selector panel will appear on the screen. We click on the drop down list box in order to see the list of all the Macros.

From the list of macros we select the macros that we want to insert inside the RTE.

The list of parameters will appear on the screen. 

We type the values that we want and we click the Select button which is located at the lower right corner of the screen.

A container appears on the screen which will display the contents of the macro when we see the page. We can mix formatted text and macros in order to have the final result that we want.

The yellow dotted border appears on the screen so that we will know what the content of the Macro is. We click on the contents of the Macro so that the parameters will appear on the screen in order to be able to edit them. Now we click the Save and publish button in order to save the changes.

One more feature that Umbraco offers us for macros in RTE is that we can enable the option which renders the contents of the macro in RTE so that we will be able to see in RTE what is going to be the final output.

In order to enable this option we go to the Macro editor and find the Editor Settings.

We check the checkbox which has the title "Render in rich text editor and the grid" and we click the Save button which is located at the upper right corner of the screen.

Now we go to the RTE that we inserted the Macro and we will see that now the contents of the Macro appears on the screen like it will appear on the visitors screen.

The yellow dotted border appears on the screen so that we will know what the content of the Macro is.