Vue整合Quill富文本編輯器

Quill介紹

Quill是一款開源的富文本編輯器，基於可擴展的架構設計，提供豐富的 API 進行定制。截止2021年1月，在github上面已有28.8k的star。

Quill項目地址：https://github.com/quilljs/quill/

Quill官網：https://quilljs.com/

簡單使用

創建項目

創建一個vue的項目，名為demo-quill-vue，不需要vuex、router和css預處理器。

安裝Quill

npm install vue-quill-editor --save

如果安裝過程很慢的話，也可以使用下面的cnpm

npm install cnpm -g --registry=https://registry.npm.taobao.org
cnpm install vue-quill-editor --save

引入Quill

在main.js中導入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

在頁面中使用

在頁面級的組件里，直接使用。

在App.vue里，寫入如下代碼：

<template>
  <div id="app">
    <quill-editor
      id="quill-editor"
      v-model="content"
      :options="editorOption"
      @change="onEditorChange($event)"
    >
    </quill-editor>
  </div>
</template>

<script>
import QuillEditor from 'vue-quill-editor'

export default {
  name: 'App',
  data: function () {
    return {
      content: '',
      editorOption: {}
    }
  },
  methods: {
    onEditorChange() {
      console.log(this.content);
    }
  }
}
</script>

<style>
#app {
  width: 800px;
  height: 500px;
}

#quill-editor {
  width: 100%;
  height: 100%;
}
</style>

demo地址

https://github.com/tanyiqu/demo-quill-vue