最近有需求，需要在項目中做一個pc與移動端都適配的富文本編輯器，網上查到用wangEditor編輯器的比較多，於是打算練習一下
官網地址：http://www.wangeditor.com/
bootcdn上有一個10版本的 不過在網上沒看到有人使用過10版本的先使用3的最新版本吧
簡單例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="editor"> <p>歡迎使用 <b>wangEditor</b> 富文本編輯器</p> </div> <script src="https://cdn.bootcss.com/wangEditor/10.0.13/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.create() </script> </body> </html>
具體詳細配合可以參考文檔
在vue封裝成組件
<template> <div> <div ref="editor" style="text-align:left"></div> </div> </template> <script> import E from "wangeditor"; export default { name: "editor", data() { return { editor:"" }; }, props: { content: { required: true } }, mounted(){ this.editor = new E(this.$refs.editor); this.editor.customConfig.onchange = html => { this.$emit('catchData',html); }; // 配置服務器端地址 this.editor.customConfig.uploadImgServer = "/Upload.php"; //自定義一個圖片參數名 this.editor.customConfig.uploadFileName = "filename"; // 將圖片大小限制為 3M this.editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; this.editor.create(); }, watch: { content: function(val) { this.editor.txt.html(val); } } }; </script> <style scoped> </style>
這樣就ok了。原理很簡單就是把變量聲明成全局變量，然后監聽加載
最后一個問題，這個編譯器放在手機端上看的時候會炸窩，解決方法有兩種。
第一種，在全局樣式中添加
.w-e-toolbar { flex-wrap: wrap; }
第二種修改js源文件 wangEditor.js中的4661行，加上 flex-wrap: wrap;就好了。
//使用組件
<WangEditor :catchData="catchData" v-bind:content="content"></WangEditor>
//接收參數
methods: {
catchData(value){
this.content=value //在這里接受子組件傳過來的參數，賦值給data里的參數
},
}
上述方法雖然封裝成組件了，但是使用起來並不方便，因為它不是雙向綁定的，是通過自定義事件從子組件向父組件傳值的。而且每個編輯器的內容必須對應寫一個自定義方法，不夠靈活，
可以將容器換成texteara然后用雙向綁定來，傳值或者獲取值，這樣會非常靈活，還有一個原因我不使用的原因是，這個編輯器沒有上標，下標的功能。
而公司需要這兩個功能，所以最后放棄了這個富文本編輯器的使用，並沒有自己親自去封裝。
。