在Vue中使用富文本编辑器Quill

jiezi

5 年前

vue-cli3
webpack@4.33.0
quill@1.3.6

npm install quill --save

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>

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

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

用法

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

例子

var delta = this.quill.getContents();

用于设置编辑器里的内容，传入的 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'}
]);

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

用法

enable(enabled: boolean = true)

例子

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

同 enable(false)。

等会再写

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

在Vue中使用富文本编辑器Quill

【版本】

【步骤】

下载 Quill

在组件中引入 Quill

使用该组件

【常用 API】

getContents

setContents

enable

disable

【常见功能】

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

【其他】