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

Question

我正在做一个项目，我必须使用 tinymce or 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 标签的数据。谢谢。

Answer 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

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

How to insert data into database with encoded HTML tags using JavaScript and PHP through rich text editor?

html

javascript

php

escaping

rich-text-editor