【版本】

  • vue-cli3
  • webpack@4.33.0
  • quill@1.3.6

【步骤】

下载Quill

npm install quill --save

在组件中引入Quill

editor.vue

<template>  <div>    <div class="editor"></div>  </div></template><script>import Quill from 'quill'import 'quill/dist/quill.snow.css'export default {  name: 'editor',  props: {    value: Object  },  data() {    return {      quill:null,      options: {        theme: 'snow',        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'],              ['link', 'image', 'video']            ]          },          placeholder: 'Insert text here ...'      }    }  },  mounted() {    let dom = this.$el.querySelector('.editor')    this.quill = new Quill(dom, this.options);    this.quill.setContents(this.value)    this.quill.on('text-change', () => {      this.$emit('input', this.quill.getContents())    });  }}</script>

使用该组件

App.vue

<template>  <div>    <div>背景</div>    <editor v-model="bg"></editor>    <div>计划</div>    <editor v-model="plan"></editor>  </div></template><script>import editor from '@/components/editor.vue';export default {  components: {    editor  },  data() {    return {      bg: {},      plan: {}    }  }}</script>

【常用API】

下面请原谅我的佛系翻译 :)

getContents

用于获取编辑器里的内容，这些内容是带格式的，返回值是一个Delta对象

用法

getContents(index: Number = 0, length: Number = remaining): Delta

例子

var delta = this.quill.getContents();

setContents

用于设置编辑器里的内容，传入的delta参数常见使用 getContents 返回的值。传入的内容应以新行结束。返回值是一个Delta对象。 source 可以是 "user" , "api" , "silent"。如果 source 是 "user"，当编辑器处于 disabled时该方法会失效。

用法

setContents(delta: Delta, source: String = 'api'): Delta

例子

this.quill.setContents([  { insert: 'Hello ' },  { insert: 'World!', attributes: { bold: true } },  { insert: '\n' }]);

enable

设置用户可编辑能力。如果 source 是 "api" , "silent"，不会影响API的调用。

用法

enable(enabled: boolean = true)

例子

this.quill.enable();this.quill.enable(false);   // Disables user input

disable

同enable(false)。

【常见功能】

双击激活编辑状态，失去焦点关闭编辑状态

等会再写

【其他】

我看到也有很多人选择用vue-quill-editor。不太了解，可以看个人需求选择使用。