最近寫后臺(tái)系統(tǒng)，有編輯器的要求，我在網(wǎng)上看了半天大概這幾種知名開源富文本編輯器記錄和對比（僅供參考）
1、UEditor 百度的。
優(yōu)點(diǎn)：插件多，基本滿足各種需求，類似貼吧中的回復(fù)界面。
缺點(diǎn)：不再維護(hù)，文檔極少，使用并不普遍，圖片只能上傳到本地服務(wù)器，如果需要上傳到其他服務(wù)器需要改動(dòng)源碼，較為難辦，加載速度慢。
總結(jié)：小項(xiàng)目，可以用用，不推薦使用。
2、kindeditor
界面類似百度，效果很像
文檔齊全但用例較少，使用還算方便。
缺點(diǎn)：總感覺樣子不是很好看，沒有現(xiàn)代那種風(fēng)格，還是老式的傳統(tǒng)圖標(biāo)。
http://kindeditor.net/demo.php
3、simditor
樣式好看，插件不多，基本滿足需求
文檔英文，使用較為吃力，如果英文水平不好的話
github上面開源，維護(hù)較好
因?yàn)槲臋n看起來吃力，所以本人沒有考慮繼續(xù)使用。
4、bootstrap-wysiwyg
利用bootstrap實(shí)現(xiàn)的，簡潔大方好看。
優(yōu)點(diǎn)：輕量，好看，使用方便。
缺點(diǎn)：需要一定的瀏覽器支持，畢竟需要bootstrap
http://www.bootcss.com/p/bootstrap-wysiwyg/
5、wangEditor
js和css實(shí)現(xiàn)
優(yōu)點(diǎn)：輕量簡潔，最重要的是開源且中文文檔齊全。設(shè)計(jì)的UI漂亮。
插件基本能滿足需求，本人推薦使用。
http://www.wangeditor.com/index.html
6、CKEditor
功能強(qiáng)大，使用較多，可以看他們官網(wǎng)的例子，馬上就有感覺。
優(yōu)點(diǎn)：編輯能力極強(qiáng)，基本和word差不多了。看起來界面極其優(yōu)秀的一款。
缺點(diǎn)：網(wǎng)站訪問速度一般，文檔英文，需要花時(shí)間開發(fā)。
7、tinymce
支持圖片在線處理，插件多，功能強(qiáng)
編輯能力優(yōu)秀，界面好看。
同樣文檔為英文，開發(fā)需要花時(shí)間。
使用之前需要考慮的點(diǎn)：
1需要插件，是否需要很多的插件，還是說簡單的那些功能就行了。
2界面考慮，看你喜歡那個(gè)界面了。
3圖片是否需要上傳圖片服務(wù)器。
4文檔如果為英文是否會(huì)影響開發(fā)。
5支持瀏覽器類型和版本。
廢話多說了，直接上代碼 先創(chuàng)建一個(gè)EditorBar.vue文件
<template>
<div id="wangeditor">
<div ref="editorElem" style="text-align:left"></div>
</div>
</template>
<script>
import E from "wangeditor";
export default {
name: "editorElem",
data() {
return {
editorContent: ""
};
},
props: ["catchData","value"], //接收父組件的方法
mounted() {
var editor = new E(this.$refs.editorElem); //創(chuàng)建富文本實(shí)例
editor.customConfig.onchange = html => {
this.editorContent = html;
this.catchData(html); //把這個(gè)html通過catchData的方法傳入父組件
};
editor.customConfig.uploadImgShowBase64 = true; // base 64 存儲(chǔ)圖片
editor.customConfig.uploadImgServer =
"http://172.16.40.170:8080/upload/image/"; // 配置服務(wù)器端地址
editor.customConfig.uploadImgHeaders = {
Accept: "*/*",
Authorization: "JWT " + sessionStorage.token
}; // 自定義 header
editor.customConfig.uploadFileName = "myFileName"; // 后端接受上傳文件的參數(shù)名
editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024; // 將圖片大小限制為 2M
editor.customConfig.uploadImgMaxLength = 6; // 限制一次最多上傳 3 張圖片
editor.customConfig.uploadImgTimeout = 3 * 60 * 1000; // 設(shè)置超時(shí)時(shí)間
editor.customConfig.zindex = 20000;
editor.customConfig.menus = [
//菜單配置
"head", // 標(biāo)題
"bold", // 粗體
"fontSize", // 字號
"fontName", // 字體
"italic", // 斜體
"underline", // 下劃線
"strikeThrough", // 刪除線
"foreColor", // 文字顏色
"backColor", // 背景顏色
"link", // 插入鏈接
"list", // 列表
"justify", // 對齊方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入圖片
"table", // 表格
"video", // 插入視頻
// "code", // 插入代碼
"undo", // 撤銷
"redo", // 重復(fù)
];
//下面是最重要的的方法
editor.customConfig.uploadImgHooks = {
before: function(xhr, editor, files) {
// 圖片上傳之前觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件
// 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
// return {
// prevent: true,
// msg: '放棄上傳'
// }
},
success: function(xhr, editor, result) {
// 圖片上傳并返回結(jié)果，圖片插入成功之后觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
this.imgUrl = Object.values(result.data).toString();
},
fail: function(xhr, editor, result) {
// 圖片上傳并返回結(jié)果，但圖片插入錯(cuò)誤時(shí)觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
},
error: function(xhr, editor) {
// 圖片上傳出錯(cuò)時(shí)觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
timeout: function(xhr, editor) {
// 圖片上傳超時(shí)時(shí)觸發(fā)
// xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
},
// 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
// （但是，服務(wù)器端返回的必須是一個(gè) JSON 格式字符串！！！否則會(huì)報(bào)錯(cuò)）
customInsert: function(insertImg, result, editor) {
let url = Object.values(result.data);
// debugger;
JSON.stringify(url);
insertImg(url);
}
};
editor.create();
editor.txt.html(this.value); //回顯
}
};
</script>
<style lang="css">
</style>
然后在你需要用到頁面引用 需要注意一點(diǎn) editor.customConfig.uploadFileName = "myFileName";就是后臺(tái)接收的名字
只有做了customInsert: function (insertImg, result, editor){}里的步驟，圖片才會(huì)在富文本中顯示，否則是不會(huì)自動(dòng)顯示。
