一.使用
安装:npm install quill --save
使用方法
![](https://img-blog.csdnimg.cn/img_convert/fc9e7ae1d36a269e9149644fa7edc2ee.png)
3.vue-quill官网:https://www.kancloud.cn/liuwave/quill/1409366
二.遇到问题
v-model数据绑定无效
改用了ref进行获取实例。Vue3中用了ref来定义数据,所以无法直接拿到实例。想要拿到实例需要通过nextTick包裹才能拿到
富文本编辑器点击无法输入,没有光标
出现这个问题可以看看富文本编辑器是不是包裹在某个插件里,被覆盖了或者被禁用了点击
这里的原因是项目中用了betterscroll 插件,插件默认禁用了点击事件,在配置里改下就可以了
隐藏工具栏出现异常
组件配置theme=”bubble”,只显示输入框出现了异常的样式,出现了输入框和一些按钮
![](https://img-blog.csdnimg.cn/img_convert/101b92523cf2b11c449a70508f622f16.png)
添加样式.ql-hidden直接设置为display:none;