quill-editor 富文本编辑器使用及焦点巨坑
一、npm安装依赖 npm install vue-quill-editor --save
二、全局引用,项目入口文件中main.js引入,如下:
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)
三、我这里是先弄了一个component组件,里面添加的配置,其中this.$refs.myTextEditor.quill.enable(true)是再次获取焦点,阻止富文本编辑器进入该页面自动获取焦点的话,只需置 false 就好,如下
<template>
<quill-editor class='editor' ref='myTextEditor' v-model='content' :options='editorOption' @change='onEditorChange($event)'></quill-editor>
</template>
<script>
const toolbarOptions = [
['bold', 'italic', 'underline', 'strike', 'link', 'image'],
['blockquote', 'code-block'],
[{
header: 1 }, {
header: 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: