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><?php echo "me"; ?></p>
<p><p>Hello</p></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!
I guess that you're printing
I guess that you're printing the textarea something like this:
However, the "<" string in HTML means "<", so when CKEditor reads contents of that textarea it sees:
The solution to that is trivial - encode your content before printing it to textarea:
Thanks to that the "<" will become "&lt;" and CKEditor will read it as "<".
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
The problem with that is that
The problem with that is that ALL of the content is then encoded including the actual HTML used to format the content in ckeditor. I may not have made clear that the code snippets will appear within a fully formatted collection of text and images and so if I use htmlspecialchars I lose the layout..
No, you'll not lose the
No, you'll not lose the layout (unless you have a bug somewhere else). By encoding content before printing it to textarea you'll produce this:
Note that the real <p> tag has been transformed to <p> so will be read as <p>. But the <p> which was already encoded will be transformed to &lt;p&gt;.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+
OK thanks. I thought I tried
OK thanks. I thought I tried it that way with no luck but will try it tomorrow and confirm.
Nope. My fault though.
Nope. My fault though.
I think the key here may be that I need to display the content on the page and then convert it into a textarea using JavaScript. So the content is used as HTML then if editing is needed the page is converted to a form on the fly. I have just realised I did not include that vital piece of information in my original post! Apologies.
So the process needs to be:
Phrasing it that clearly my problem is obvious now. My question should not be a PHP one as I need to process the HTML markup in JavaScript during the conversion to a textarea to allow both display and editing.
Thanks for forcing me to think it through logically!
Nod to Kip for an easy solution to how to escape the HTML in JavaScript once I recognised the problem.
CKeditor Not Displaying full contents/Images
Hi,
I am facing this issue since morning and I didn't find any solution for this.Can anybody help?
This is very weird problem.
When I add the content and images in to ckeditor and submit the form to add the record into database.It adds successfully.
But when I go to edit mode of that record it doesn't show me original content/images means it removes half of the content/images in the middle of the content and shows me half content while when I check in the database the full content is present.
Why it not showing/displaying full content becuase of this when i add any other field value of that record and it has been updated in the database with the half content of ckeditor which it was showing.
Please help...its very urgent.
Thanks A lot !
Parveen