集成 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 地址参考我集体网站