将 <div> 样式及其内容保存在 contenteditable div 中

Question

这个问题的标题可能不清楚，但这就是我试图在这里解释它的原因。我有一个内容可编辑的 div，它就像我的博客文章（管理面板）的文本区域。让 db 数据在 contenteditable div 中正确显示是没有问题的。但是当我将更新的文章版本保存到我的数据库时，它并没有保存 contenteditable div 中的 div 样式（例如 ）。

示例：

<div id="article_content" class="edit_article_content_container_inner" contenteditable="true"><?php echo $db_content ?></div>

输出：

<div id="article_content" class="edit_article_content_container_inner" contenteditable="true">
<div>Dear visitor,</div>
<div><br /></div>
<div>Thank you for visiting</div>
</div>

当我做出更改并决定保存新版本时，db_content 列会更新，如下所示：

Dear visitor,Thank you for visiting this page

因此，在保存新更新的文章时，contenteditable div 会破坏我的 div 样式。有没有办法仍然存储这些 div 样式？

谢谢。

这是我进行 ajax 调用的部分

$("#btn-save-new-article").on('click', function (event) {
        var article_id = $('.edit_article_title_container').attr('data-article-id');
        var article_title = $("#article_title").text();
        var article_content = $("#article_content").text();
        event.preventDefault();
        $.ajax({
            type: "POST",
            url: "/includes/db-requests/admin/db-save-edited-article.php",
            data: {article_id: article_id, article_title: article_title, article_content: article_content},
            success: function(data,textStatus,jqXHR){   finish_editing_article(data,textStatus,jqXHR);  }
        });
    });

    function finish_editing_article(data,textStatus,jqXHR) {
        //alert (data);
        if (data == "article_edited_success") {
            //location.reload();
            alert(data);
        } else {
            alert(data);
        }
    }

如您所见，我正在存储 article_id、article_title 和 article_content。

接收数据并实际存储：

//DIV SUBMITTED DATA
$article_id = safe($mysqli,$_POST['article_id']);
$article_title = safe($mysqli,$_POST['article_title']); 
$article_content = $_POST['article_content'];

Answer 1

.text() 仅返回元素的文本内容。 .html() 返回完整的 HTML 内容。

var article_content = $("#article_content").html();