在后台管理系統中引入富文本編輯器 (vue-quill-editor)

在admin系統中引入富文本編輯器 (vue-quill-editor)

• 由於公司項目的需求，內容需要更新，那么自然需要admin后台來上傳內容，在苦苦尋覓了N個編輯器之后，終於找到了一個比較容易使用，外觀也比較美觀的

• vue-quill-editor

• 首先安裝

cnpm install vue-quill-editor --save-dev

• 然后在需要使用的頁面中引用

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

• 在頁面中調用組件（別忘了在components聲明）

components: {
    quillEditor
  },

<div v-if="show" class="editorBox">
          <!-- 調用富文本編輯器👇 -->
          <quill-editor ref="myText" v-model="note" :config='editorOption' class="editor">
          </quill-editor>
          <el-button type="primary" @click="submit" class="submitBtn">發布</el-button>
        </div>

• editorOption是需要的一些配置，如果需要一些功能可以去官方文檔去看，我這里默認就足夠用了，就不闡述了
• 內容則是v-model綁定即可，生成的內容自動生成html格式，傳給后台就完事了
• 效果如圖，個人感覺還是非常簡潔美觀的