IntegrateTinymce富文本和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...还有一个githubissue问题https://github.com/PanJiaChen...因为花裤衩的整合解决方案没有集成粘贴上传，原因好像是粘贴上传是付费项目，所以我手动集成粘贴上传，其实不难。思路：监听粘贴事件->获取图片字节流并上传图片->将上传成功返回的图片url插入到富文本中监听粘贴事件首先粘贴事件，我监听@paste事件在富文本的textarea里面，但是不行，看文档发现应该是在初始化的时候绑定了事件，所以就这样做了。initTinymce(){const_this=thiswindow.tinymce.init({xxx..paste_data_images:false,//粘贴图像xxx...init_instance_callback:editor=>{xxx...editor.on('paste',(evt)=>{//监听粘贴事件this.onPaste(evt)})},xxx...})}，上传图片，插入数据onPaste(event){//实现图片粘贴上传constitems=(event.clipboardData||window.clipboardData).items//搜索剪贴板项目，只取第一个if(items[0].type.indexOf('image')!==-1){console.log('粘贴的是图片类型')constfile=items[0].getAsFile()constformData=newFormData()formData.append('file',file)//上传图片UpLoadImg(formData).then(res=>{console.log(res)if(res.code===200){//放在content中（图片可以正常上传）window.tinymce.get(this.tinymceId).insertContent(`
