wangEditor富文本編輯器好處：可以吧文本編輯器中的內容轉成json格式，方便app、小程序使用
wangEditor官網
wangEditor官方文檔
wangEditor官方下載
下載好之後找到wangEditor.js文件。然後引入進去。以下是我使用的一些功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<button id="btn1">BOTTON</button>
<div id="editor">
<p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p>
</div>
<!-- 注意， 只需要引用 JS，無需引用任何 CSS ！！！-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
// 自定義菜單配置
editor.customConfig.menus = [
'head', // 標題
'bold', // 粗體
'fontSize', // 字號
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'list', // 列表
'justify', // 對齊方式
'quote', // 引用
'image', // 插入圖片
'undo', // 撤銷
'redo' // 重複
];
//上傳圖片接口
editor.customConfig.uploadImgServer = '/api/upload/upload_images_desc.html';
editor.create();
editor.txt.html('<p>用 JS 設置的內容</p>');
//點擊按鈕獲取對應內容
document.getElementById('btn1').addEventListener('click', function () {
var json = editor.txt.getJSON() // 獲取 JSON 格式的內容
var jsonStr = JSON.stringify(json)
console.log(json)
console.log(jsonStr)
console.log(editor.txt.html()) //獲取內容
})
</script>
</body>
</html>
上傳圖片接口的返回值格式
{
// errno 即錯誤代碼，0 表示沒有錯誤。
// 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理
"errno": 0,
// data 是一個數組，返回若干圖片的線上地址
"data": [
"圖片1地址",
"圖片2地址",
"……"
]
}
具體請參考剛放文檔，不具體細說了！！！！哈哈哈哈