百度搜一下“VUE 富文本编辑器”,五花八门,N多种,推荐比较多的是集成百度的UEditor,然后是vue-quill-editor。后者是专门为vue提供的,结合起来更顺手。试了试UEditor,然后放弃了,虽然功能丰富,但是确实略麻烦。vue-quill-editor简单轻巧又开源,可自己随意订制,因此选了后者。下面简单说一下怎么使用。
先上最终效果,如图:
1、组件编写
①、Quilleditor组件
在components/common下创建Quilleditor.vue,主要代码如下:
template代码:
js代码:
①编辑器配置
②、CropUpload组件--图片裁剪
在components/common下创建CropUpload.vue,主要代码如下:
template代码:
js代码:
至此,两个组件已经创建完成。
2、插件js编写
在plugins下创建nuxt-quill-plugin.js,内容如下:
然后在nuxt.config.js中引入该插件
3、组件使用
在页面中引入如下
所有配置完以后,你会发现出现的效果有可能如下:
这是因为nuxt默认首页服务端渲染,其他页面客户端渲染,而window对象只在客户端存在,因此最好不要让带富文本的页面出现在首页使用。当然这不是终极解决办法,不过vue-quill-editor同样支持服务端渲染,稍候再做研究。
各位看官有什么意见建议,欢迎随时骚扰~~~