wangeditor富文本編輯器的使用（超詳細）

一、基本介紹

官方文檔：http://www.wangeditor.com/

1、wangeditor富文本編輯器的特點

• 基於javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用
• WangEditor富文本編輯器配置方便、使用簡單、且開源免費
• 各項基本配置基本齊全，適合功能需求簡單的項目構建
• 兼容性是支持IE10+的瀏覽器
• 默認正文p、字體樣式以span標籤的行內樣式添加
  
  2、功能介紹
  下圖是基本也是全部的功能點（從左到右）
• 包括：【標題設置、字體加粗、斜體、下劃線、刪除、文字顏色、背景顏色、鏈接、列表（有序、無序）、表情、圖片（網絡圖片、本地上傳）、表格、視頻、代碼塊、返回上一步、返回下一步（但其實ctrl+z快捷鍵也可以）】

二、創建編輯器
1、引入編輯器（多種引入方式）

• 包管理工具例如node下載
  • npm install wangeditor
  • bower install wangEditor
• 下載源文件js引入（ https://github.com/wangfupeng1988/wangEditor/releases）
  • <script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>
• 在線cdn引入（https://www.bootcdn.cn/wangEditor/）
  • 網站鏈接選擇版本複製引入即可

2、使用編輯器
1、創建容器

<div id="wangeditor">
    <div ref="editorElem"></div>
</div>

2、創建並且實例化組件

//vue的使用
import E from "wangeditor”;//導入組件
// 相當於js的變量設置
data() {
return {
  editor: null,
}}
//methods裏創建調用、或是mounted裏面直接生產
this.editor = new E(_this.$refs.editorElem);//獲取組件並構造編輯器
this.editor.create(); // 創建富文本實例
//js的使用
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()

3、基礎配置

• 配置菜單

//這是默認的菜單配置就是全部的功能、不需要的話將其去掉即可

this.editor.customConfig.menus = [
    'head',  // 標題
    'bold',  // 粗體
    'fontSize',  // 字號
    'fontName',  // 字體
    'italic',  // 斜體
    'underline',  // 下劃線
    'strikeThrough',  // 刪除線
    'foreColor',  // 文字顏色
    'backColor',  // 背景顏色
    'link',  // 插入鏈接
    'list',  // 列表
    'justify',  // 對齊方式
    'quote',  // 引用
    'emoticon',  // 表情
    'image',  // 插入圖片
    'table',  // 表格
    'video',  // 插入視頻
    'code',  // 插入代碼
    'undo',  // 撤銷
    'redo'  // 重複
    ]

• 自定義設置

// 自定義顏色
this.editor.customConfig.colors = [
"#000000",
"#333333",
];
// 自定義字體
this.editor.customConfig.fontNames = [
"PingFangSC",
];
//配置多種語言--就是將編輯器原本文字配置成你需要的文字、
//***鏈接文字一定要在鏈接的上面
this.editor.customConfig.lang = {
'設置標題': 'title',
'正文': 'p',
'鏈接文字': 'link text',
'鏈接': 'link',
'上傳圖片': 'upload image',
'上傳': 'upload',
'創建': 'init'
// 還可自定添加更多
}

4、常用功能設置

//設置編輯器內容
this.editor.txt.html(“yanyanyan”);
// 編輯器的事件，每次改變會獲取其html內容（html內容是帶標籤的）
this.editor.customConfig.onchange = html => {
_this.formValidate.content = html;
};
// 設置編輯器層級
this.editor.customConfig.zIndex = 10;
// 去除複製過來文本的默認樣式
this.editor.customConfig.pasteFilterStyle = true;
//用戶點擊富文本區域會觸發onfocus函數執行
this.editor.customConfig.onfocus = function () {
        console.log("onfocus")
    }
// 將圖片大小限制爲 3M
this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024
// 限制一次最多上傳 5 張圖片
this.editor.customConfig.uploadImgMaxLength = 5
//上傳圖片的錯誤提示默認使用alert彈出,也可以自定義用戶體驗更好的提示方式
editor.customConfig.customAlert = function (info) {
    // info 是需要提示的內容
    alert('自定義提示：' + info)
}

5、關於本地上傳圖片
編輯器自帶圖片上傳的上傳的網站鏈接圖片
本地上傳圖片需要自己設置

// 上傳圖片到服務器,對應的是controller層的@RequestMapping("/upload")
this.editor.customConfig.uploadImgServer = "/api/file/upload”;//接口名稱
//自定義name,接收的時候圖片文件的那麼用這個，對應的是參數中的MultipartFile upimg名稱,這個名稱即上傳到瀏覽器的參數名稱
this.editor.customConfig.uploadFileName = "file_key”;//這個需要和後臺商量上傳圖片的名稱
// 上傳圖片的結果反饋
this.editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 圖片上傳之前觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
// 如果返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
// return {
// prevent: true,
// msg: '放棄上傳'
// }
// console.log("before:",xhr)
},
success: function(xhr, editor, result) {
// 圖片上傳並返回結果，圖片插入成功之後觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
// console.log("success:",result)
},
fail: function(xhr, editor, result) {
// 圖片上傳並返回結果，但圖片插入錯誤時觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
},
error: function(xhr, editor) {
// 圖片上傳出錯時觸發
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
// 如果服務器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
// （但是，服務器端返回的必須是一個 JSON 格式字符串！！！否則會報錯）
customInsert: function(insertImg, result, editor) {
// 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
// insertImg 是插入圖片的函數，參數editor 是編輯器對象，result 是服務器端返回的結果
// 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
var url = result.result.remote_path;
insertImg(url);
// result 必須是一個 JSON 格式字符串！！！否則報錯
}
};
// }

6、其他

常用 API
屬性
* 獲取編輯器的唯一標識 editor.id
* 獲取編輯區域 DOM 節點 editor.$textElem[0]
* 獲取菜單欄 DOM 節點 editor.$toolbarElem[0]
* 獲取編輯器配置信息 editor.config
* 獲取編輯區域 DOM 節點 ID editor.textElemId
* 獲取菜單欄 DOM 節點 ID editor.toolbarElemId
* 獲取菜單欄中“圖片”菜單的 DOM 節點 ID editor.imgMenuId
方法
選取操作
* 獲取選中的文字 editor.selection.getSelectionText()
* 獲取選取所在的 DOM 節點 editor.selection.getSelectionContainerElem()[0]
    * 開始節點 editor.selection.getSelectionStartElem()[0]
    * 結束節點 editor.selection.getSelectionEndElem()[0]
* 摺疊選取 editor.selection.collapseRange()
* 更多可參見源碼中定義的方法
編輯內容操作
* 插入 HTML editor.cmd.do('insertHTML', '<p>...</p>')
* 可通過editor.cmd.do(name, value)來執行document.execCommand(name, false, value)的操作

三、問題解決
1、標題樣式、字體樣式不生效

• 原因：設置的全局樣式導致樣式失效
• 解決：重新對編輯器的樣式進行設置優先級高於全局即可

2、編輯器實例化不成功報錯

• 解決：使用定時器變成異步操作即可

3、圖片上傳，複製的內容沒有自動添加到服務器

• 需要自動識別添加圖片並上傳或者是和由後臺自動獲取保存