使用 React.js 將富文本編輯器中的 HTML 標記保存到 MongoDB 中

Question

我一直在嘗試創建自己的博客應用程序，用戶可以在其中創建帖子，並且我設法插入了 Quill 富文本編輯器。

它成功地更新了一個狀態，但我收到的數據是一個 HTML 標記（下面的例子）。 所以我的問題是：如何使用 POST 請求將其保存到我的數據庫中。

注意：我不是在問如何制作它的后端邏輯或如何進行 AJAX 調用，我只是在問如何將此標記作為參數傳遞給 POST 請求。 我是否需要某種轉換器，以便我可以將 HTML 標記轉換為 JSON 對象或其他內容？

 <h1>This is the header.</h1><p>This is a sample text </p><p>so you guys can have an idea of what </p><p>the editor produces and what I'm kind of </p><p>struggling to store in the MongoDB database.</p><p><em>and this is some italic text.</em></p>

Answer 1

當您已經獲取數據時，您應該探索 react 中的一個選項

危險地SetInnerHTML

你的功能應該是：

function createMarkup(theExactHtmlWithTag) {
    return { __html: theExactHtmlWithTag };
}

而用法：

 <div dangerouslySetInnerHTML={createMarkup(`<h4> Hello <strong> World </strong></h4>` )} />

請記住在數據庫存儲之前清理您的 HTML。