vue 富文本编辑器 vue-quill-editor

文档地址：https://quilljs.com/docs/quickstart/

github地址:https://github.com/surmon-china/vue-quill-editor 使用方法：

#### NPM
npm install vue-quill-editor --save
#### mian.js
import Vue from 'vue'
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, /* { default global options } */)

### 使用 demo
<template>
  <!-- bidirectional data binding（双向数据绑定） -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
 
  <!-- Or manually control the data synchronization（或手动控制数据流） -->
  <quill-editor :content="content"
                :options="editorOption"
                @change="onEditorChange($event)">
  </quill-editor>
</template>
 
<script>
 
  // you can also register quill modules in the component
  import Quill from 'quill'
  import { someModule } from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // some quill options
        }
      }
    },
    // manually control the data synchronization
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>
复制代码

常见问题

问题一：输入文字出现首字母的问题

删除node_modules
删除 package-lock.json
最后npm install
这个问题很奇怪我看很多博客都是通过这个方式解决的，确实可以解决这个问题
复制代码

问题二：字体样式丢失

解决方案： js:

import Quill from 'quill'

var Size = Quill.import('attributors/style/size');

Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px', '32px'];

Quill.register(Size, true);

<style>
.ql-toolbar{
  white-space: normal;
}
.ql-picker-item[data-value='10px']::before, .ql-picker-label[data-value='10px']::before {
  content: '10px' !important;
}

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

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

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

.ql-picker-item[data-value='18px']::before, .ql-picker-label[data-value='18px']::before {
  content: '18px' !important;
}

.ql-picker-item[data-value='20px']::before, .ql-picker-label[data-value='20px']::before {
  content: '20px' !important;
}

.ql-picker-item[data-value='24px']::before, .ql-picker-label[data-value='24px']::before {
  content: '24px' !important;
}

.ql-picker-item[data-value='30px']::before, .ql-picker-label[data-value='30px']::before {
  content: '30px' !important;
}

.ql-picker-item[data-value='32px']::before, .ql-picker-label[data-value='32px']::before {
  content: '32px' !important;
}

.ql-picker-item[data-value='36px']::before, .ql-picker-label[data-value='36px']::before {
  content: '36px' !important;
}
<style>


![](https://user-gold-cdn.xitu.io/2018/11/7/166ec4433f2db714?w=1018&h=268&f=png&s=64861)
复制代码

问题三：缩进indent转为style

IndentStyle.js

var Parchment = Quill.import("parchment")
const levels = [1, 2, 3, 4, 5];
const multiplier = 2;

export default class IndentAttributor extends Parchment.Attributor.Style {
	add(node, value) {
		return super.add(node, `${value * multiplier}em`);
	}

	value(node) {
		return parseFloat(super.value(node)) / multiplier || undefined; // Don't return NaN
	}
}

const IndentStyle = new IndentAttributor('indent', 'margin-left', {
	scope: Parchment.Scope.BLOCK,
	whitelist: levels.map(value => `${value * multiplier}em`)
});

Quill.register(IndentStyle);
复制代码

import Quill from 'quill'
import IndentStyle from './Indent.js';
...下面就正常使用就好了


![](https://user-gold-cdn.xitu.io/2018/11/7/166ec44a8a529b79?w=1208&h=246&f=png&s=97191)
复制代码

问题四：禁止富文本编辑

场景：比如有些时候文章需要下架，那么下架的时候是不允许编辑的

this.$refs.myQuillEditor.quill.enable(false)
// false禁止编辑  true语序编辑
复制代码