CODEWITHSUNDEEP
phphtmlmysqlckeditor
Sachin
Sachin

Reputation: 1698

CKEditor renders HTML tags inserted in wysiwyg mode to actual output in PHP/MySQL

I am using CKEditor 4.5.3. I am having a serious problem as title of this post sounds. I explain it further - when I put HTML tags in CKEditor wysiwyg mode like below:

This is a <h1> heading tag.

In source mode, it converts to:

<p>This is a &lt;h1&gt; heading tag.</p>

So everything seems to be fine at this stage.

I am using PHP/MySQL to save all this information in the database. In my MySQL database, the above information is stored as:

<p>This is a &lt;h1&gt; heading tag.</p>

On front-end of my website, the information is shown as:

This is a <h1> heading tag.

So everything is again OK at this phase.

But when I open this post in my admin panel for editing purpose, the whole mess begins at this point. The wysiwyg mode of CKEditor displays the information stored in my database as:

enter image description here

Clearly, the HTML tag <h1> has been actually converted into heading output itself rather than showing it as a tag. So if I update the post, the browser output on front-end is eventually converted to:

enter image description here

I don't understand where is the problem - whether it is in CKEditor or something related to PHP/MySQL?

How can I prevent all this from happening?

EDIT

The HTML form field for which CKEditor is applied:

<tr>
    <th><label for="txtpostcontent">Content:</label></th>
    <td><textarea name="txtpostcontent" id="txtpostcontent" class="txtafield editor"><?php echo $post_content; ?></textarea>
    </td>
</tr>

Some PHP code:

// Here we fetch the content from database and store in a variable
$post_content = $post[0]->post_content;

// Here we print the array which stores the information from database
Array
(
    [0] => stdClass Object
        (
            [post_id] => 9
            [post_name] => HTML Headings
            [post_url] => html-headings
            [post_content] => 

this is a <h1> heading.





            [post_date_published] => 2016-02-22 15:54:51
        )

)

// On editing, we store the post content in a variable
$post_content = isset($_POST['txtpostcontent']) ? $_POST['txtpostcontent'] : '';

Note: There is no AJAX is used in this process. The form is submitted in a regular fashion.

Upvotes: 2

Views: 1540

Answers (1)

aross
aross

Reputation: 3606

You didn't provide an example, but I'm going to go off on a limb and say it's encoding. Consider this HTML:

<input type="text" value="Some HTML: <h1>">

Calling jQuery('input:first').val() will result in this: Some HTML: <h1>

Then this HTML:

<input type="text" value="Some HTML: &lt;h2&gt;">

The same JS will result in this: Some HTML: <h2>. This is not intuitive, right? There's the root of your problem. Consider this:

<input type="text" value="Some HTML: &amp;lt;h3&amp;gt;">

Now, the JS will result in what we want: Some HTML: &lt;h3&gt;.

To make sure your CKEditor gets the right HTML code, you will have to call htmlentities() on the HTML before inserting it in your input's value="".

In your case, you're using a textarea, so it may be slightly different. But I found a blog post that came to the same conclusion as I for a similar (the same?) problem: a syntax highlighting plugin messed up encoding, so he had to convert htmlentities (the author of the blog post chose to convert only &lt; and &gt;, not sure if that matters).

Upvotes: 1

Related Questions