关于我使用vue-quill-editor遇到的一些“坑”

前言

vue-quill-editor是一款富文本编辑器组件，当时我使用vue-quill-editor时是vue2，不知现在是否兼容vue3

安装使用vue-quill-editor

先放上vue-quill-editor git链接vue-quill-editor

第一步当然是安装vue-quill-editor包，这里我采用npm 来安装 vue-quill-editor。

npm install vue-quill-editor --save

接下来向Vue项目里引入vue-quill-editor，在main.js里引入vue-quill-editor和样式。

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);

使用vue-quill-editor。

<quill-editor class="editor"          
    v-model="content"          
    ref="myQuillEditor"          
    :options="editorOption"          
    @blur="onEditorBlur($event)"          
    @focus="onEditorFocus($event)"          
    @change="onEditorChange($event)"         
    @input="click()">
</quill-editor>

export default { 
    name: 'editor',    
    data() {       
        return {         
            content:null,         
            editorOption:{}     
        },          
        methods:{         
            onEditorBlur(){         
            },         
            onEditorFocus(){
                //获得焦点事件         
            },         
            onEditorReady() {         
            },         
            onEditorChange(){
                //内容改变事件         
            },         
            click () {           
                this.$emit("push",this.content)           
                console.log(this.content)         
            },     
        }, 
    }
}

vue-quill-editor默认功能，如上图，若要减少或增加其功能、图标等配置，可在editorOption:{}进行：

var toolbarOptions = [         
    ['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'],    //清除字体样式         
    ['link','image', 'video']    //上传图片、上传视频 
] 
editorOption:{         
    // 富文本编辑器配置，顶部的工具栏         
    modules: {         
        toolbar:"#toolbar",         
        toolbar: {                 
            container: toolbarOptions,  // 工具栏         
        },         
    },         
    theme: "snow",//主题         
    placeholder: "写一些有趣的东西吧..." 
}

遇到的“坑”

1.样式失效问题

在使用vue-quill-editor的时候，遇到前四个功能全失效的情况，

即加粗、倾斜、下划线、删除线失效，

其原因其实是全局css设置了strong（加粗）、em（倾斜）、u(下划线）、s（删除线）默认样式，导致失效，只要对全局css做修改即可。

其他样式失效也可能是这个原因，可作为参考，如代码块没有背景色，在全局css对pre添加背景色即可。

2.无法引入图片问题

const webpack = require('webpack')

//在webpack文件module模块中加入下面代码

 module:{   
     rules:[       
         {         
             test: /\.js$/,         
             exclude: /node_modules(?!\/quill-image-drop-module|quill-image-resize-module)/,         
             loader: 'babel-loader'       
         } 
     ]} 
     plugins: [     
         new webpack.ProvidePlugin({       
             'window.Quill': 'quill/dist/quill.js', 
             'Quill': 'quill/dist/quill.js'     
         })   
     ] 
}

优化

引入代码块高亮显示

vue-quill-editor默认代码块没有高亮效果，如图：

而没有高亮区别显示的代码是没有灵魂的，接下来呢，引入highlight.js使代码高亮，

有关highlight.js，可浏览highlight.js官网 highlightjs.org/

使用highlight.js

首先，依然是安装与引入

1、安装

npm install highlight.js

2、引入

在需要的组件引入或在main.js全局引入

import hljs from 'highlight.js'

代码高亮样式，我选的是dracula.css，还有许多其他样式可选择，可浏览highlight.js官网 highlightjs.org/

import 'highlight.js/styles/dracula.css'

到此就可以代码块高亮了。

另外，我发现vue-quill-editor代码块存在时，要转向代码块外，另开一行，鼠标点击是没有用的， 需要在代码块内连续回车三次，才可以另开一行。

最后

到此，我的分享结束了，希望我踩过的坑能为后来者有一些帮助。