vue3加富文本编辑器使用与坑

一.使用

1. 安装：npm install quill --save

2. 使用方法

3.vue-quill官网：https://www.kancloud.cn/liuwave/quill/1409366

二．遇到问题

1. v-model数据绑定无效

改用了ref进行获取实例。Vue3中用了ref来定义数据，所以无法直接拿到实例。想要拿到实例需要通过nextTick包裹才能拿到

2. 富文本编辑器点击无法输入，没有光标

出现这个问题可以看看富文本编辑器是不是包裹在某个插件里，被覆盖了或者被禁用了点击

这里的原因是项目中用了betterscroll 插件，插件默认禁用了点击事件，在配置里改下就可以了

3. 隐藏工具栏出现异常

组件配置theme=”bubble”，只显示输入框出现了异常的样式，出现了输入框和一些按钮

添加样式.ql-hidden直接设置为display:none;