CKEditor with HTML content stores, displays but cannot display for edit

Question

I have used CKEditor for a few years without really understanding it. I now want to use it to display text which will include HTML, CSS, JavaScript and PHP example code. None of that needs to execute it is just to show the code to others.

Currently I used the textarea replace method to edit content and I need to carry on that way. When I add the content first time it is sanitised (mysqli_real_escape_string) and stored in a MySQL database correctly. It also then displays correctly with the CKEditor markup working as markup and the HTML/PHP showing as a code example. However, when I edit the content a second time the HTML examples become "real" HTML and are no longer visible as examples.

For example this:

<?php echo "hello"; ?>
<p>Hello</p>

is correctly (?) stored as:

<p>&lt;?php echo "me"; ?&gt;</p>
<p>&lt;p&gt;Hello&lt;/p&gt;</p>

and displays on the page as shown in the first code snippet (which is what I want). When I then hit edit again the code examples vanish into the background as real HTML (part of the page). If I put the code examples in as code snippets (which I would rather not have to do because of the intended users) the result in the editor (second edit) looks like this:

<!--?php echo "me"; ?-->
Hello

I am sure i am missing a basic understanding of what is going on behind the scenes but can anyone explain how to allow users to type in text which includes HTML, CSS, JavaScript, PHP and MySQL code examples which must then appear as examples and not markup (and be editable as examples).

I have played with config.entities and config.protectedSource after some research but they do not seem to be relevant (or to work). Weirdly a couple of times it seemed to work fine and I thought I had cracked it but then stopped with no further changes to the config. That means I now have less idea what I am doing than when I started!

Answer 1

You don't mention which version you are using, but if it's relatively new (4.4+) you can use the Code Snippets plugin that was designed exactly for this. See the demo at http://ckeditor.com/demo#widgets. It might help with the encoding issues too. There's docs on it too.

Th help with the current encoding issue, it would help a LOT if you showed us how you output the data and load it into CKEditor. For example "When I then hit edit again" doesn't really describe anything without context. For example, do you use setData() with AJAX? Do you use an inline editor? Code examples would be the best.