vue结合ueditor富文本编辑器（换肤分离） -凯发ag旗舰厅登录网址下载

需求

(pc端)做一个可以使用图片上传、视频上传、文件上传功能的富文本组件，简单的文本编辑发布功能,采用socket方式传输，

做法

当时看到这个需求，我觉得是不难的,就去github上找富文本编辑器，因为项目比较急，当时我的想法是能找开箱即用的就找开箱即用的。

这几个编辑器都试了一次,最后经过筛选

• vue-quill-editor：不支持本地视频上传
• vue-froala-wysiwyg：我想要的功能都有包括图片和视频上传，还额外支持响应式，但是是收费的
• ueditor:功能很全，但是样式实在是很丑,可能要自己封装
• 剩下的编辑器基本上要么是功能不足或者是移动端的(优点是轻量)

因为没做过富文本的开发，所以当时我测试这些富文本就花了一个下午，后来仔细考虑了一下，最后使用了比较保守的方式，用了ueditor开发，顺便美化了一下。

引入ueditor

下载地址和文档

• import '../../static/ueditor/ueditor.config'
• import '../../static/ueditor/ueditor.all.min'
• import '../../static/ueditor/lang/zh-cn/zh-cn'

我们要去ueditor.config.js文件里面去改一下路径配置

修改样式

引入ueditor之后，直接让工具栏隐藏起来，然后我们自己新建一个div模拟toolbars

隐藏之后的ueditor就是一个类似div加了可编辑属性的既视感

接下来我们直接一个div，然后给他一个flex布局，然后去iconfont上面下载一些图标，但是我们需要配置一下webpack使他支持批量处理svg,参考手摸手系列

现在就大变身了，样子非常好看，跟现代的编辑器没什么差别

给图标绑定点击事件

经过上面的步骤，样式基本上搞定了，剩下来就是使他们点击的时候，触发事件，让他们做出相应的动作就行，例如

execcommand: function (name) {this.editor.execcommand(name)},

插入图片，插入视频，插入文件这种操作，我并没有使用ueditor内置的功能，视频和文件夹我做成了进度条的形式，放在了富文本编辑器的下边，图片上传成功后返回值拼接起来，根据双向绑定，在editor组件内部动态创建图片，点击这三个图标，会把事件抛出来，这样你想用什么上传组件就用哪个，你还可以用socket进行上传等等，这样子，editor组件内部只需要维护编辑器的html文本就可以，职责单一，后期也好维护

editordata: {body: '',images: []},

本地保存功能

最后添加了一个自动保存的功能,这里可以用定时器或者当内容发生变化的时候存到localstorage里面。

autosavebody () {if (this.isautosaved && this.editordata.body) {let storage = {}object.assign(storage, this.editordata)const pms = json.stringify(storage)this.isautosaved = falsesettimeout(() => {localstorage.setitem(this.storagekey, pms)this.isautosaved = true}, 500)}}

但是必须要考虑一个情况，当前是第一次写还是发布之后进行修改，所以外部使用的时候，你只需要操作innervalue这个属性，这个属性的值你可以通过后台来获取(后台获取的就是修改状态)，然后编辑器就会呈现什么样的数据,内部的实现方式就是加了一个init函数

init: function () {// 外部有默认值if (this.value.body) {this.editor.setcontent(this.value.body)} else {// 有本地缓存const storage = localstorage.getitem(this.storagekey)if (storage) {const storagejson = json.parse(storage)object.assign(this.editordata, storagejson)if (this.editordata.body) {this.editor.setcontent(this.editordata.body)}} else {// 没有本地缓存object.assign(this.editordata, this.$options.data().editordata)}}this.autosaveinterval = setinterval(() => {this.autosavebody()}, 5000)},

缺点

组件太大，默认压缩也有389k,开启gzip之后有100k左右

优点

功能强大，产品需求可迭代。

补充

当然这个是我项目中抽取出来的，不是完整的代码，只是一个思路吧。第一次做富文本，要是说错了大家多多指正，或者大家有更好的思路欢迎一起讨论

代码地址

更多专业前端知识，请上 【猿2048】www.mk2048.com

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的vue结合ueditor富文本编辑器（换肤分离）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。