CKEditor 将以所见即所得模式插入的 HTML 标签呈现为 PHP/MySQL 中的实际输出

Question

我正在使用 CKEditor 4.5.3。我有一个严重的问题，因为这个 post 的标题听起来。我进一步解释 - 当我将 HTML 标签放入 CKEditor 所见即所得模式时，如下所示：

This is a <h1> heading tag.

在源代码模式下，它转换为：

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

所以在这个阶段一切似乎都很好。

我正在使用 PHP/MySQL 将所有这些信息保存在数据库中。在我的 MySQL 数据库中，上述信息存储为：

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

在我的网站front-end上，信息显示为：

This is a <h1> heading tag.

所以在这个阶段一切都正常了。

但是当我在我的管理面板中打开这个 post 进行编辑时，整个混乱就从这里开始了。 CKEditor 的所见即所得模式将我的数据库中存储的信息显示为：

显然，HTML 标签 <h1> 实际上已经转换为标题输出本身，而不是将其显示为标签。因此，如果我更新 post，front-end 上的浏览器输出最终将转换为：

我不明白问题出在哪里 - 是在 CKEditor 中还是与 PHP/MySQL 相关的问题？

我怎样才能避免这一切的发生？

编辑

应用CKEditor的HTML表单域：

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

一些PHP代码：

// 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'] : '';

注意：此过程中没有使用 AJAX。表格以常规方式提交。

Answer 1

您没有提供示例，但我要冒昧地说它是编码。考虑这个 HTML:

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

调用 jQuery('input:first').val() 将导致：Some HTML: <h1>

然后这个HTML:

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

相同的 JS 将导致：Some HTML: <h2>。这不直观，对吧？这是你问题的根源。考虑一下：

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

现在，JS 将产生我们想要的结果：Some HTML: <h3>。

为确保您的 CKEditor 获得正确的 HTML 代码，您必须在 HTML 上调用 htmlentities()，然后再将其插入输入的 value=""。

在您的情况下，您使用的是文本区域，因此可能略有不同。但是我发现一个blog post和我得出相同结论的一个类似（相同？）的问题：一个语法高亮插件搞砸了编码，所以他不得不转换htmlentities（博客的作者post 选择仅转换 < 和 >，不确定这是否重要）。

CKEditor 将以所见即所得模式插入的 HTML 标签呈现为 PHP/MySQL 中的实际输出

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

html

php

mysql

ckeditor