U4-11382 - Ability to render macros inline with a span tag instead of a div

Created by Greg Woods 29 May 2018, 00:18:11 Updated by Greg Woods 29 May 2018, 00:18:11

We created a macro that returned just a string (not complex html), in this case the interest rate of a product, that we wanted to render in an RTE e.g. as a banner on a page in amongst a whole lot of other custom content.

We expected this to render inline e.g. This month's special rate is 5%, contact us now.

However because the macro container is a <div class="umb-macro-holder" this is always inserted.

To render macros inline a number of changes are required to the Umbraco core file to essentially replace the default div with a span, however there may be a better approach to this. Also need to add a configurable option when creating a macro e.g. Render as div or span:

/umbraco/js/umbraco.services.js (in Umbraco core this file is tinymce.service.js, believe it is amalgamated into the one file for release) Line 6889

  • editor.serializer.addRules('div');
  • editor.serializer.addRules('span');

Line 6891

  •               editor.serializer.addNodeFilter('div', function (nodes, name) {
  •   			editor.serializer.addNodeFilter('span', function (nodes, name) {

Line 7121

  •            var macroDiv = editor.dom.create('div', { 'class': 'umb-macro-holder ' + macroObject.macroAlias + ' mceNonEditable ' + uniqueId }, macroSyntaxComment + '<ins>Macro alias: <strong>' + macroObject.macroAlias + '</strong></ins>');
  •            var macroDiv = editor.dom.create('span', { 'class': 'umb-macro-holder ' + macroObject.macroAlias + ' mceNonEditable ' + uniqueId }, macroSyntaxComment + '<ins>Macro alias: <strong>' + macroObject.macroAlias + '</strong></ins>');

Line 7123

  •            var $macroDiv = $(editor.dom.select('div.umb-macro-holder.' + uniqueId));
  •            var $macroDiv = $(editor.dom.select('span.umb-macro-holder.' + uniqueId));


Note: Believe this used in the RTE when viewing the source html Line 144

  • html = html.replace(/(
    )[\s\S]?(</ins> *</span>)/ig, "$1Macro alias: $2$3");
  • html = html.replace(/( )[\s\S]?(</ins> *</span>)/ig, "$1Macro alias: $2$3");

\umbraco\lib\tinymce\skins\umbraco\content.min.css Line 84:

  • display:block;
  • display:inline-block;

C# file: \src\Umbraco.Core\Macros\MacroTagParser.cs Line 144

  •                var sb = new StringBuilder("<div class=\"umb-macro-holder ");
  •                var sb = new StringBuilder("<span class=\"umb-macro-holder ");

There are some related issues that I believe would also be resolved by making this change: http://issues.umbraco.org/issue/U4-8543 http://issues.umbraco.org/issue/U4-8672


Priority: Normal

Type: Bug

State: Submitted


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions:

Due in version:


Story Points: