集成Tinymce富文本和markdown編輯器
由於我是使用的花褲衩的基礎模版，他有一套集成方案，於是了就照着集成富文本編輯器和MarkDown編輯器。效果如下。
集成富文本編輯器
集成富文本編輯器是很麻煩的一件事，之前也集成個CKEditor和UEditor，現在是照着花褲衩那個集成方案， 按照他這個配套的開發文檔
基本就能實現樣式了。我這里就不再贅述。
麻煩的就是修改圖片上傳
富文本圖片上傳到服務器
富文本編輯器右上角里面，花褲衩把那個上傳按鈕單獨抽出來了，可以在這個組件看到
里面的上傳就很簡單了，是集成的ElementUI的 el-upload組件，上傳回去，觸發this.$emit('successCBK', arr)父組件監聽事件，把上傳后的數組圖片放入富文本里面。
el-upload組件可以參考我的這篇文章 https://www.charmcode.cn/article/2020-07-26_Vue_el_upload
富文本編輯器粘貼上傳圖片
首先聲明我這個截圖粘貼上傳有部分缺陷 詳情見我在思否的提問https://segmentfault.com/q/1010000023417827
還有就是github issue提問 https://github.com/PanJiaChen/vue-element-admin/issues/3346
由於花褲衩那個集成方案沒有集成粘貼上傳，原因好像是粘貼上傳是付費工程，所以我就自己手動集成粘貼上傳，這個其實也不難。
思路:監聽粘貼事件->獲取到圖片字節流上傳圖片->把上傳成功返回的圖片url插入到富文本里面
監聽粘貼事件
首先粘貼事件，我是在富文本的
textarea監聽@paste事件，但是不行，看文檔發現應該在初始化的時候，綁定事件，於是這樣操作。
initTinymce() {
const _this = this
window.tinymce.init({
xxx..
paste_data_images: false, // 粘貼圖片
xxx...
init_instance_callback: editor => {
xxx...
editor.on('paste', (evt) => {
// 監聽粘貼事件
this.onPaste(evt)
})
},
xxx...
})
},
上傳圖片，並插入數據
onPaste(event) {
// 實現圖片粘貼上傳
const items = (event.clipboardData || window.clipboardData).items
// 搜索剪切板items 只取第一張
if (items[0].type.indexOf('image') !== -1) {
console.log('粘貼的是圖片類型')
const file = items[0].getAsFile()
const formData = new FormData()
formData.append('file', file)
// 上傳圖片
UpLoadImg(formData).then(res => {
console.log(res)
if (res.code === 200) {
// 放到內容當中 （圖片正常上傳沒問題）
window.tinymce.get(this.tinymceId).insertContent(`<img class="wscnph" src="${res.data.image}" >`)
} else {
this.$message.error('圖片上傳失敗,聯系開發人員')
}
})
} else {
console.log('粘貼的不是圖片，不能上傳')
}
}
到這里圖片粘貼上傳就好了，如果想控制默認圖片大小可以自己加寬高樣式。
集成MarkDown編輯器
由於花褲衩里面的MarkDown集成方案有問題，https://github.com/panjiachen/vue-element-admin/issues?q=markdown
當然也有PR來修復 https://github.com/PanJiaChen/vue-element-admin/pull/3292 但是目前合並。
於是了我打算自己手寫一個編輯器，然后用markdown組件渲染的，前后倒騰來兩天。
但是發現還是開源的集成的方便，前后倒騰了一兩天，於是就放棄了。就使用了mavon-editor這款編輯器。
集成使用很簡單 https://github.com/hinesboy/mavonEditor 照着官方說明做就行了。
添加markdown組件
我在工具欄里面，添加了一個語法參考的鏈接
<mavon-editor v-if="form.goods_desc_type===2" ref="md" v-model="form.goods_desc" code-style="atom-one-dark" style="height: 500px" @imgAdd="imgAdd" @imgDel="imgDel" >
<template slot="left-toolbar-before">
<a href="https://markdown-it.github.io/" target="_blank"><span class="el-icon-link" aria-hidden="true" title="語法參考"></span></a>
</template>
</mavon-editor>
圖片上傳，同時支持粘貼上傳
官網有demo@imgAdd="imgAdd"添加這個事件,然后給加ref="md"屬性，方便獲取到這個組件。
代碼如下
// markdown編輯器圖片上傳 支持截圖粘貼上傳
imgAdd(pos, $file) {
const formData = new FormData()
formData.append('file', $file)
UpLoadImg(formData).then(res => {
console.log(res)
if (res.code === 200) {
// 放到markdown編輯器內容當中
this.$refs.md.$img2Url(pos, res.data.image)
}
})
}
總結
有哪些開源的組件，集成起來很簡單，花點時間看看文檔，不明白的地方搜下issues基本就能解決個七七八八了。