【quill-editor】vue中使用vue-quill-editor自定义字体大小、自定义样式、自定义计数器、设置动态可编辑

自定义字体大小

先引入 Quill，然后手写样式

import Quill from 'quill' // 需要引入quill才可以设置自定义字体大小
import VueQuillEditor from 'vue-quill-editor'
import './style/font-size.css' // 需要自己手写的css，对应下面的字号

const Size = Quill.import('attributors/style/size') 
Size.whitelist = ['12px', '14px', '16px'] // 自己随意写字号大小，只要对应上面css内的就可以
Quill.register(Size, true) // 通过quill注册自定义的Size

Vue.use(VueQuillEditor)

...

data(){
  return{
    // 编辑器组件的option
    option: {
      modules: {
        toolbar: [{'size': Size.whitelist}]] // 需要这样引入Size的whitelist
      }
    }
  }
}

font-size.css内代码

// font-size.css 需要自己手写的，字号样式对应上vue那边写的字号即可

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
  content: '16px';
}

自定义计数器

官方给了一种示例，是通过注册一个自定义模块实现的，我这里是写了一个更加便捷的方式，配合vue要比自定义模块写起来更容易也更容易理解

首先是官方的

也是通过引入quill，然后在里面自定义一个模块，模块的方法就是在dom里取#counter然后改变里面的innerText，如果你编辑器自定义了很多模块，那这样统一再写一个计数器模块也无所谓，我开发的就是个简单的编辑器，所以也不想写的太复杂，也不利于别人维护和理解。

// 贴的官方的代码

// 实现并注册模块
Quill.register('modules/counter', function(quill, options) {
  var container = document.querySelector('#counter');
  quill.on('text-change', function() {
    var text = quill.getText();
    //用这种方法计算字数有几个问题，我们以后会解决
    container.innerText = text.split(/\s+/).length;
  });
});

// 现在，我们可以像这样初始化Quill
var quill = new Quill('#editor', {
  modules: {
    counter: true
  }
});

vue来写

使用ref对编辑器组件绑定

<span>{{textLength}} / {{maxLength}}</span>
...
mounted(){
  let el = this.$refs.editor.quill // 我绑定的ref名字叫做editor
  this.el.on('text-change', this.counterHandler) // 使用监听对‘text-change’监听
  // !! 注意使用off在销毁钩子里把监听off掉 ！！
}
...
data(){
  return{
    textLength: 0, // 字数
    maxLength: 100
  }
}
...
methods:{
  counterHandler(){
    this.textLength = this.el.getText().length - 1
      // 超出禁止输入
      if (this.textLength > this.maxLength) {
        this.el.deleteText(this.maxLength, 1)
      }
  }
}

设置动态可编辑

只要使用vue的ref语法，就可以随意使用文档里官方给的那些api和方法

this.el.enable(true)
this.el.focus()

效果展示

官方文档： 前言 · Quill官方中文文档 · 看云 (quilljs.cn)