前端開發過程中，會遇到在頁面上加入富文字編輯器，在vue專案中開發遇到這一需求的時候，我們可以使用富文字編輯器vue-quill-editor，話不多說，先上一張效果圖：

1）安裝 vue-quill-editor 依賴

npm install vue-quill-editor --save

2）入口檔案main.js中引入

// 引入富文字編輯器
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)
 

3）具體需要使用富文字編輯器中的元件中使用

1⃣️元件內部引入富文字編輯器

import { quillEditor } from "vue-quill-editor"; // 匯入quillEditor元件

2⃣️使用

<template>
  <div>
    富文字編輯器
    <div class="editor">
      <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
    </div>
  </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor"; // 匯入quillEditor元件
import 'quill/dist/quill.js';
export default {
  data() {
    return {
      content: "this is a simple demo", // 編輯器的內容
      editorOption: {
        // 編輯器的配置
        // something config
        theme: "bubble"
      }
    };
  },
  components: {
    quillEditor
  },
};
</script>
 

就這樣，在我們的專案中就新增好了一個富文字編輯框。資料content就是我們要傳到後臺儲存的資料，更多api也可參照其文件，文件連結https://quilljs.com/docs/quickstart/。