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));
  

\umbraco\lib\tinymce\plugins\codemirror\source.html

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

Comments