富文本編輯器之————Vue-Quill-Editor

1. 安裝vue-quill-eidtor

yarn add vue-quill-editor 或者  npm install vue-quill-editor --save

2. 在main.js中引入：

import Vue from 'vue'
import { quillEditor } from 'vue-quill-editor' // 引入vue-quill-editor
import 'quill/dist/quill.snow.css' // 引入主題
Vue.component('quillEditor', quillEditor) //註冊爲全局組件，也可局部註冊

3. 在頁面中使用：

<template>
    <div id="editor_bg">
       <div class="edit-detail">
        <span > 給作者留言</span>
        <quill-editor
        class="quill"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorChange($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
        >
        </quill-editor>
        <div class="btn-container">
            <button @click="saveHtml">提交</button>
            <button @click="cancelEdit">取消</button>
        </div>
        </div>
    </div>
</template>
<script>
export default {
  name: 'editor',
  data () {
    return {
      content: '<p>hello world</p>',
      editorOption: {
        theme: 'snow',
        modules: {
          toolbar: [
            [{ 'size': ['small', false, 'large', 'huge'] }], // 字體大小
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜體，下劃線，刪除線
            [{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
            [{ 'script': 'sub' }, { 'script': 'super' }], // 上下標
            ['clean'] // 清除字體樣式
          ]
        }

      }
    }
  },
  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  },
  methods: {
    onEditorReady (editor) { // 準備編輯器

    },
    onEditorBlur () {}, // 失去焦點事件
    onEditorFocus () {}, // 獲得焦點事件
    onEditorChange () {}, // 內容改變事件
    saveHtml: function (event) {
      alert(this.content)
    },
    cancelEdit () {
      alert('取消')
    }
  }
}
</script>
<style lang="scss">
#editor_bg{
    .edit-detail{
        border: 1px solid #ccc;
        border-radius: 15px;
        width: 560px;
        height: 210px;
        margin-left: 80px;
        margin-top: 50px;
        position: relative;
    }
    .edit-detail>span{
       font-size: 18px;
       font-weight: 600;
       margin-left: 20px;
       letter-spacing: 0.06rem;
       height: 35px;
       display: inline-block;
       line-height: 35px;
    }
    .quill{
        height: 180px;
        border: 1px solid transparent;
        border: none;
        outline: none;
        border-radius: 10px;
    }
   .ql-container.ql-snow {
     border: none;
}
.ql-toolbar.ql-snow {
    border: 1px solid #ccc;
    border-left: none;
    border-right: none;
}
.btn-container{
    display: flex;
    justify-content: space-between;
    position: absolute;
   bottom: 8px;
   right: 30px;
    width: 170px;
    button{
        border: none;
        width: 60px;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        color: #fff;
        border-radius: 5px;
        background-color: #999;
    }
}

}
</style>

vue-quill-editor效果如圖：

參考官網：https://github.com/surmon-china/vue-quill-editor