集成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/10...
还有就是github issue发问 https://github.com/PanJiaChen...

因为花裤衩那个集成计划没有集成粘贴上传，起因如同是粘贴上传是付费工程，所以我就本人手动集成粘贴上传，这个其实也不难。

思路:监听粘贴事件->获取到图片字节流上传图片->把上传胜利返回的图片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...
当然也有PR来修复 https://github.com/PanJiaChen... 然而目前合并。
于是了我打算本人手写一个编辑器，而后用markdown组件渲染的，前后倒腾来两天。

然而发现还是开源的集成的不便，前后倒腾了一两天，于是就放弃了。就应用了mavon-editor这款编辑器。
集成应用很简略 https://github.com/hinesboy/m... 照着官网阐明做就行了。

增加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根本就能解决个七七八八了。

残缺GitHub地址

GitHub地址参考我集体网站