WangEditor 的儲存格式 - daniel-qa/Vue GitHub Wiki
- ex
這是第一行
我是第二行
實際儲存的內容
"<p>這是第一行</p>
<p><br>
</p>
<p>我是第二行</p>"
wangEditor 會自動插入 < p>,主要是因為它的文件模型(Document Model)是以「區塊節點(Block)」為基礎,而不是直接儲存純文字。
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>