CKeditor rich text editor displaying html tags in browser

Question

I've just installed CKeditor rich text WYSIWYG editor on a site I'm building and it seems to be working ok except for the fact that it inserts text into my mysql database as encoded html rather than regular html and then when the browser outputs this text it converts the encoded data into regular html that then displays in the browser showing the html tags and none of the styling!?

eg I type:

"This is text"

into the editor and it then inserts

<p>This is text</p>

into the database. Then when the page is called the browser converts the above and outouts the following on the page:

<p>This is text</p>

obviously I just want "This is text" to display on the page.

Does anyone know why this is happening/how to solve it please?

Any suggestions would be most welcome.

Cheers

Answer 1

If you don't want CKEditor to create paragraphs for you, set config.autoParagraph to false. Additionally you may want to change enter key behaviour with config.enterMode set to CKEDITOR.ENTER_BR.

And regarding disappearing styles...

---

EDIT: OK, it seems I missed your point.

So your website is displaying HTML markup instead of HTML while rendering out what you typed? Then the problem is your server side rather than CKEditor. You can verify in your console that CKEDITOR.instances.yourInstance.getData() yields the correct, unescaped HTML:

<p>This is text</p> // Right!

If it is so, and I strongly believe it is, CKEditor's just fine and this is your server app that is converting special chars into entities (i.e. like PHP htmlspecialchars) while saving to database. You didn't mention what kind of framework/language you use there, so I can just tell you that it is to secure user input to prevent cross-site scripting, breaking layouts etc. and all popular frameworks allow you to disable that feature for a particular field. Simply refer to documentation.

Answer 2

Modern templating languages tend to autoescape html input. For example, in DTL it would be displayed correctly in the template by simply using {{ object.field_name|safe }} This is a desired action, since user input is considered untrusted and may be considered malicious.