Vue.js3.2引入VueQuill富文本编辑器
概述
官方文档:Introduction | VueQuill (vueup.github.io)
中文文档:vue-quill-editor · Quill官方中文文档 · 看云 (kancloud.cn)
编辑器的插件列举查看官网:Modules | VueQuill (vueup.github.io),我实现了图片上传到服务器和图片缩放插件的使用,博客链接为:上传图片到服务器 和实现图片的缩放
在几款适合Vue3的富文本编辑器中,我发现VueQuill最简单易用,不过也有一个BUG:数据无法双向绑定,页面的数据不会显示到富文本编辑器中,实现数据双向绑定的办法看下面
实现过程
安装插件
1 | npm install @vueup/vue-quill@latest --save |
局部引入
虽然可以全局引入,但是还是建议局部引入,首先引入组件和样式(在<script>
标签中加入下面代码)
1 | import {QuillEditor} from '@vueup/vue-quill' |
使用组件的代码如下
1 | <QuillEditor |
属性说明
属性 | 解释 |
---|---|
v-model:content="content" |
绑定的数据是content |
placeholder="这里输入商品详情..." |
内容为空时的提示 |
theme="snow" |
主题 |
ref="editor" |
这个是重点,定义editor使用官方的方法 |
toolbar="full" |
工具栏的功能全部可以使用 |
contentType="html" |
内容的格式是html |
由于双向绑定没有用,所以需要使用官方的方法setHTML()
设置值,首先上面使用编辑器的代码中要有ref="editor"
,然后在<script>
标签中定义一个空editor和上面对应,然后就可以使用编辑器的方法了
1 | //定义一个空editor |
完整代码
只保留了和VueQuill富文本编辑器有关的代码
1 | <template> |
PS.
参考代码GitHub仓库链接:a6678696/vue-quill-demo
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LeDao's Blog!
评论