Vue中快速引用vue-quill-editor富文本编辑框

安装 vue-quill-editor

npm install vue-quill-editor
yarn add vue-quill-editor

引入

全局引入

在main.js中引入

import  VueQuillEditor from 'vue-quill-editor'
// require styles 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor)

局部引入

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {quillEditor} from 'vue-quill-editor'

自定义工具栏

toolbar工具栏对应功能的模块名大致上有以下的功能

• 背景颜色 - background
• 加粗- bold
• 颜色 - color
• 字体 - font
• 内联代码 - code
• 斜体 - italic
• 链接 - link
• 大小 - size
• 删除线 - strike
• 上标/下标 - script
• 下划线 - underline
• 引用- blockquote
• 标题 - header
• 缩进 - indent
• 列表 - list
• 文本对齐 - align
• 文本方向 - direction
• 代码块 - code-block
• 公式 - formula
• 图片 - image
• 视频 - video
• 清除字体样式- clean

官方文档里有默认格式规范

1.只需要填写功能名的

• 加粗 - bold；
• 斜体 - italic
• 下划线 - underline
• 删除线 - strike
• 引用- blockquote
• 代码块 - code-block
• 公式 - formula
• 图片 - image
• 视频 - video
• 清除字体样式- clean
• 这一类的引用 直接['name','name']这种格式就好了

2.需要有默认值的

• 标题 - header
• [{ 'header': 1 }, { 'header': 2 }] 值字体大小

• 列表 - list
• [{ 'list': 'ordered'}, { 'list': 'bullet' }], 值ordered，bullet

• 上标/下标 - script
• [{ 'script': 'sub'}, { 'script': 'super' }], 值sub，super

• 缩进 - indent
• [{ 'indent': '-1'}, { 'indent': '+1' }], 值-1，+1等

• 文本方向 - direction
• [{ 'direction': 'rtl' }], 值rtl

3.有多个值 以下拉列表形式显示

• 大小 - size
• [{ 'size': ['small', false, 'large', 'huge'] }],

• 标题 - header
• [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

4.有系统默认值的功能只需填写一个空数组 就会有出现默认的选项

• 颜色 - color
• 背景颜色 - background
• 字体 - font
• 文本对齐 - align

• 他们的格式都是
• [{ 'color': [] }, { 'background': [] }],
• [{ 'font': [] }],
• [{ 'align': [] }]

基础样式

export default {
    name: "pushCont",
    data() {
      return {
        editorOption:{
          placeholder: '请输入文本...',
          modules:{
              toolbar:[
                ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
                ['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': [] }],
                [{ 'align': [] }],
                ['clean'],
                // ['image']                       
              ]
          }
        },