如何通过富文本编辑器使用 JavaScript 和 PHP 将带有编码 HTML 标签的数据插入数据库？答案

【问题标题】：How to insert data into database with encoded HTML tags using JavaScript and PHP through rich text editor?如何通过富文本编辑器使用 JavaScript 和 PHP 将带有编码 HTML 标签的数据插入数据库？
【发布时间】：2021-12-10 20:24:39
【问题描述】：

我正在做一个项目，我必须使用tinymce 或ckeditor 将数据插入数据库。但问题是，HTML 标签没有插入数据库！这是我的代码。

我的 HTML

<form action="action.php" method="POST" id="dataForm">
    <textarea name="details" class="tinymce"></textarea>
    <button type="submit" id="dataBtn">Add Post</button>
    <div id="dataResult"></div>
</form>

我的 JavaScript

$('#dataBtn').click(function(){
    $.post(
    $('#dataForm').attr('action'),
    $('#dataForm').serializeArray(),
        function(result) {
            $('#dataResult').html(result);
        }
    );
});

我的 PHP

$details = $_POST['details'];

$flag  = false;
$error = [];
$valid = [];

if (!empty($details)) {
    $flag = true;
} else {
    $error[] = "Provide details!";
    $flag    = false;
}

if ($flag == true) {

    $query  = "INSERT INTO tbl_post(details)VALUES('$details')";
    $result = $db->insert($query); // $db is database class

    if ($result) {
        $valid[] = "Data added successfully!";
    } else {
        $error[] = "Something is not right! please try again later!";
    }

} else {
    $error[] = "Something went wrong!";
}

数据被插入数据库，但没有富文本编辑器格式，或者你可以说没有 HTML 标记。我想知道如何处理我的代码来插入带有 HTML 标记的数据。谢谢。

【问题讨论】：

要回答这个问题，必须真正查看用于插入的 PHP 代码/
请检查。谢谢。
关注this 文章，DB 中的详细信息列应该类似于details text COLLATE utf8_unicode_ci NOT NULL,
@navnath 您共享的链接，是的，这是可能的。但是，如果您使用 JavaScript 将输入值发送到您的 PHP 文件，那么 HTML 标记会在到达您的 PHP 脚本之前自动删除。我正在寻找一种解决方案，我可以在它传递 JavaScript 时保留 HTML 标记。
@Bearded 我认为$('#dataForm').serializeArray 不会将 textarea 中的值作为 html 提供，而是像 var details = tinymce.activeEditor.getContent() 一样从 tinymce 获取内容，然后传入 post 请求。

标签： javascript php html escaping rich-text-editor

【解决方案1】：

使用tinymce.activeEditor.getContent() 从tinymce 编辑器获取html 内容

tinymce.init({
    selector: 'textarea',
    ...
});
  

$('#dataBtn').click(function(e){
    e.preventDefault();
    // to get html content from tinymce
    var myContent = tinymce.activeEditor.getContent();
    const data = $('#dataForm').serializeArray();
    data.push({name: 'details', value: myContent});

    $.post(
        $('#dataForm').attr('action'),
        data,
        function(result) {
            $('#dataResult').html(result);
        }
    );
});

在 PHP 中

$details = json_decode($_POST['details'], true);

Demo

【讨论】：

非常感谢，它运行良好。但是$details = json_decode($_POST['details'], true); 给了我一个空的文本区域。所以我用了$details = $_POST['details'];和FILTER_SANITIZE_STRING还有FILTER_SANITIZE_SPECIAL_CHARS