Preserving your code content in TinyMCE

In our content management system, we use the html editor TinyMCE.  We tried out lots before choosing it. We thought it provided the best integration, and was most stable.  There may be others out there that are better, but haven't found them and we like TinyMCE.

Having said that, there is one thing that we have always had a bit of a gripe with, and that is showing html code in our pages.  TinyMCE does it ok, but there is a particular (common) set of circumstances that screws it up.  We have trawled the documentation and web, gone on forums etc to try and find an explanation of how best to do it. But.... blind alleys and... nothing.

We even built some filtering code using the TinyMCE API to massage the page data using the onBeforeSetContent function and up till now that has worked ok, but we just knew there must be a better way.

And we've found it.... and are happy to share it with you (it's blindingly simple).

The Problem

First of all, let's describe the problem.  Hopefully, you will identify with it.

Step1

You're in your CMS and you've got a TinyMCE editor instance open and you've added your coding text.  Everything looks fine:

 

Step2

So let's see what the content looks like in code view in the TinyMCE editor.  It should show the code in html entities and the rest of the page should be wrapped in paragraph tags. Yup, looking good.

 

Step 3

Everything is fine, so we'll write it away to our database.  Let's check the database to make sure that everything has been written away correctly. Yes, that is also looking correct; entities and tags correctly saved to the database.  When we display this record on a webpage, it correctly renders the entities so we can see the coding line and the proper html tags are correctly interpreted by the browser.

Step 4

OK.  Now we need to make a change to the stored text.  Let's bring the record back into the CMS and have a look at it.

What has happened here?  TinyMCE has now decided to interpret the entities and instead of showing the code line, it's actually created the hyperlink that the line was describing.

So it seems it's OK when we save it the first time, but if we want to edit the page in any way we've got to go back and start again.  That, I'm afraid, is NOT GOOD.

How to do it

So, originally we got around this situation by wrapping the example code in <code /> or <pre /> tags and using onBeforeSetContent to 're-entity' all the text within those tags as it got to the TinyMCE editor.

So we thought about it a little more.  TinyMCE was converting all entities to real characters as it loads.  So what if we escape ALL the text BEFORE it hits TinyMCE?  That way, existing entities will have their &'s converted to &amp;

So a &gt; will be converted to &amp;gt;  then when loaded by the TinyMCE editor, it will be converted back to &gt;

It works!  Maybe that's what everyone else has been doing.  Maybe we are stoopid.

All we had to do was escape the textarea data in our CMS editor page:

<!-- escape the CMS data before it hits TinyMCE -->
<textarea><?php echo htmlentities($bodytext); ?></textarea>

Doh!

comments powered by Disqus