Using inline macros in the Umbraco editor

I've seen the question asked a lot of times on the forum, and it's not always easy to give a good answer to it. "How do I create a macro that works inline in the editor". By default when inserting Macros in the editor, it will force a <p> ir <div> tag to be created around it, which means that the macro will always be a block of content.

In some cases however, it is nice to be able to insert a macro that just creates a single word or phrase inside a sentence. It could be a price of a product, a user specific property, or whatever you might need.

So I came up with the below solution. Of course it has benefits and drawbacks. In short:
Benefit:
- Inline macros

Drawbacks:
- You do not get a nice way of entering data for macro parameters
- The preview snippet is static from the moment you insert it in the editor

At the bottom you will find a link to a complete zipped umbraco install that has been set up with this, so you can have a play with it. It's using SQL CE, so should be easy to get up and running.

If you can live with this, then read on :-). First let's take a look at what the result will look like. When you insert a snippet in the editor it will look like this:

In this case my snippet will write the name of the page, and when rendered in the frontend it will look like this:

So, how does this work? There a three parts that we need to set up
1. Create a previewable macro
2. Create an aspx page that renders the preview snippet for the editor
3. Configure the TinyMCE editor to use the snippets with the Templates module

Step 1: Previewable macro

Create a macro with a "preview" parameter. In this case I'm creating an xslt macro, but works just fine with razor or usercontrols as well.

Make the macro aware of a preview state

Step 2: Snippet page

Create an aspx page that will render the macro snippet as well as the macro in preview mode.

My snippet page looks like this. I added the snippet class to a span to make it appear green in the editor. Be aware that this is all in one line to avoid too many spaces in the output when rendered.

Now, for the TinyMCE to be able to reach the page, we need to exclude it from the urls that Umbraco handles. We do this is by adding the folder to the web.config:

Step 3: Enable the templates module in TinyMCE

First we add a few thing to the tinyMceConfig.config file.

The command

The plugin

Allow the umbraco:macro tag as valid html

And add configuration for the templates, so the editor knows which snippets it can get and from which urls.

Then we disable the tidy function in umbracoSettings.config, because that will throw an error when it sees the umbraco macro tag.

Now, go to the Richtext Editor datatype, and enable the newly added templates module.

I also added my own editorStyles stylesheet, but that is standard umbraco stuff :-)

And that is it. Now the macro can be inserted to your text without having to be in a <p> tag. Neato.

I hope this is useful for you. Let me know if you can see any other drawbacks than the ones that I mentioned at the beginning.

Get the demosite here: InlineMacroDemo.zip