WangEditor 的儲存格式 - daniel-qa/Vue GitHub Wiki

  • ex
這是第一行

我是第二行

實際儲存的內容

"<p>這是第一行</p>
<p><br>
</p>
<p>我是第二行</p>"

wangEditor 會自動插入 < p>,主要是因為它的文件模型(Document Model)是以「區塊節點(Block)」為基礎,而不是直接儲存純文字。

核心概念:Block-based(區塊模型)

wangEditor 的設計是:

📌 一切內容都必須放在「區塊(Block)」裡

常見 block:

類型 對應 HTML
paragraph <p>
heading <h1> ~ <h6>
quote <blockquote>
list item <li>

為什麼一定要有

因為:

❌ 編輯器不接受「裸文字」
✅ 所有文字都必須包在 block 裡

所以這種是不合法的 editor state:

Hello world

會被自動修正成:

[
  {
    "type": "paragraph",
    "children": [{ "text": "Hello world" }]
  }
]

最後輸出 HTML:

<p>Hello world</p>
⚠️ **GitHub.com Fallback** ⚠️