Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Quick Tip: Displaying HTML/CFML Code in the Regular Content of a Mura Page

DZone's Guide to

Quick Tip: Displaying HTML/CFML Code in the Regular Content of a Mura Page

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

In a previous blog post, I mentioned that I'm currently playing around with the ColdFusion-powered Mura CMS.  I'm using it to create an internal website where my team can share best coding practices and examples.

When you create a page of content in Mura, you do so using the WYSIWYG editor CKEditor.  As with most WYSIWYG editors, CKEditor has a "Source" button that lets you drop out of editor mode and view/edit the raw HTML, so I figured if I wrote the CFML code I wanted to display on my page in source mode using "<" and ">" character entity references for the angle brackets it would display properly in the public view of the page.

It seemed to work at first, but if I opened the same page again in order to edit it, Mura would convert the character entity references into the actual angle brackets within the raw HTML code, and the content would become invisible to the public.

I tried a couple of different approaches before eventually determining that I could actually type the CFML or HTML code I wanted to show in my content within WYSIWYG editor mode as long as I put a space between the first angle bracket and the first letter of the starting tag.  Apparently whatever Mura is doing to the content (and to be clear, I don't think this is necessarily a bug - I suspect there's a good reason why it does what it does) only occurs if it recognizes the string fragment as being an HTML or CFML tag, and adding that space makes the tag unrecognizable.  It makes my code examples look a little funny, but I can live with it.

If anyone else has a better workaround for this situation, please share with the group.  :)

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}