vue中使用vue-quill-editor富文本編輯器及自定義工具欄

前言

在Vue項目中使用vue-quill-editor富文本編輯器及編輯器自定義工具欄。

使用vue-quill-editor

安裝

yarn add vue-quill-editor --save

引入

import VueQuillEditor from 'vue-quill-editor'
// vue-quill-editor 樣式引入
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor);

複製代碼

使用

<template>
 	<el-row>
          <el-col :span="20">
            <span style="margin: 0px 12px 0px 10px">評分</span>
            <el-rate style="display: inline-block" v-model="rateValue" show-score text-color="#ff9900" score-template="{value}" >
            </el-rate>
          </el-col>
          <el-col :span="4">
            <i class="el-icon-share" style="color: red;display: block;margin-left:65%" >收藏</i >
          </el-col>
        </el-row>
        
          <el-card>
           <span>評論</span>
              <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)" >
              </quill-editor>
          </el-card>
       </template>
<script> import { quillEditor } from "vue-quill-editor"; export default { name: "InfoExperience", data() { return { rateValue: null, rateStyle: { fontSize: "35px" }, content: null, // 初始編輯器內容 editorOption: {} // 編輯器配置項 }; }, created() {}, methods: { onEditorBlur() { //失去焦點事件 }, onEditorFocus() { //得到焦點事件 }, onEditorChange() { //內容改變事件 } } }; </script>

<style scoped></style>

複製代碼

效果

自定義vue-quill-editor工具欄

Quilljs官網說明

官網說明 Toolbar Module

The Toolbar module allow users to easily format Quill’s contents It can be configured with a custom container and handlers.

工具欄模塊容許用戶輕鬆格式化Quill的內容。 可使用自定義container和 handlers進行配置。

var quill = new Quill('#editor', {
  modules: {
    toolbar: {
      container: '#toolbar',  // Selector for toolbar container
      handlers: {
        'bold': customBoldHandler
      }
    }
  }
});
複製代碼

自定義工具欄參數項

editorOption: {
        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']                                         // 清除樣式
          ]
        }
      }
複製代碼

到這裏，你只須要將須要的工具配置項加入editorOption中。你能夠移除不須要的工具，讓工具欄更加簡潔，更多使用詳見【quilljs官網】