富文本編輯器--獲取JSON

獲取 JSON 格式的內容

可以通過editor.txt.getJSON獲取 JSON 格式的編輯器的內容，v3.0.14開始支持，示例如下

<div id="div1"> <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/> </div> <button id="btn1">getJSON</button> <script type="text/javascript" src="/wangEditor.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') editor.create() document.getElementById('btn1').addEventListener('click', function () { var json = editor.txt.getJSON() // 獲取 JSON 格式的內容 var jsonStr = JSON.stringify(json) console.log(json) console.log(jsonStr) }) </script> 

---

如果編輯器區域的 html 內容是如下：

<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p> <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/> 

那么獲取的 JSON 格式就如下：

[ { "tag": "p", "attrs": [], "children": [ "歡迎使用 ", { "tag": "b", "attrs": [], "children": [ "wangEditor" ] }, " 富文本編輯器" ] }, { "tag": "img", "attrs": [ { "name": "src", "value": "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" }, { "name": "style", "value": "max-width:100%;" } ], "children": [] }, { "tag": "p", "attrs": [], "children": [ { "tag": "br", "attrs": [], "children": [] } ] } ]

實例：