【避坑指南】vue3使用富文本编辑器vueQuillEditor
vue3富文本
·
网上看了很多篇文章,照抄之后发现都有各种各样的问题,还是得自己看了源码之后才知道正确的使用方法
第一步安装
npm install @vueup/vue-quill@alpha --save
第二步引入
在main.js中引入
import { createApp } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const app = createApp()
app.component('QuillEditor', QuillEditor)
或者在需要的模块中引入
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
export default {
components: {
QuillEditor
}
}
第三步使用(坑开始出现了!)
配置项随便写一下就行了
editorOption: {
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'], //加粗,斜体,下划线,删除线
['blockquote', 'code-block'], //引用,代码块
[{ header: 1 }, { header: 2 }], // 标题,键值对的形式;1、2表示字体大小
[{ list: 'ordered' }, { list: 'bullet' }], //列表
[{ script: 'sub' }, { script: 'super' }], // 上下标
[{ indent: '-1' }, { indent: '+1' }], // 缩进
[{ direction: 'rtl' }], // 文本方向
[{ size: ['small', false, 'large', 'huge'] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题
[{ color: [] }, { background: [] }], // 字体颜色,字体背景颜色
[{ font: [] }], //字体
[{ align: [] }], //对齐方式
// ['clean'], //清除字体样式
// ['image'], //上传图片、上传视频 ['image', 'video']
]
},
placeholder: '请输入内容...'
}
重点在这里!
错误的使用方法:
<QuillEditor ref="myQuillEditor"
theme="snow"
v-model="content"
:options="editorOption"
@change="onEditorChange($event)"
/>
这样写, v-model 不会有任何效果,@change也不会有任何效果,组件实际有的事件如下:
emits: [
'textChange',
'selectionChange',
'editorChange',
'update:content',
'focus',
'blur',
'ready',
],
正确的使用 方式
<QuillEditor ref="myQuillEditor"
theme="snow"
v-model:content="summary"
:options="editorOption"
contentType="html"
/>
总结:
① v-model 要改成 v-model:content
② @change 要改成 @selectionChange 或 @editorChange
③ 一定要加上 contentType=“html”
更多推荐
已为社区贡献2条内容
所有评论(0)