vue中是使用富文本編輯器vue-quill-edit

之前使用的富文本編輯器是uEditor,kindEditor,感覺不太方便

近期項目vue單頁面，就使用這個編輯器組件吧！

一、安裝  cnpm install vue-quill-editor

二、引入 

　　在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)

 

三、封裝組件：

　　

<template>
    <div class="quill_box">
      <quill-editor 
        v-model="content" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
      </quill-editor>
    </div>
    
</template> 
<script>
import Bus from "../../assets/utils/eventBus";



export default {
  data() {
    return {
      content:'',
      editorOption: {
        placeholder: "請編輯內容",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ script: "sub" }, { script: "super" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ size: ["small", false, "large", "huge"] }],
            [{ font: [] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            [ "image"]
          ]
        }
      }
    };
  },
  props:[
    'contentDefault'
  ],
  watch:{
    contentDefault:function(){
      this.content = this.contentDefault;
    }
  },
  mounted:function(){
    this.content = this.contentDefault;
  },
  methods: {
    onEditorBlur() {
      //失去焦點事件
      // console.log('失去焦點');
    },
    onEditorFocus() {
      //獲得焦點事件
      // console.log('獲得焦點事件');
    },
    onEditorChange() {
      //內容改變事件
      // console.log('內容改變事件');
      Bus.$emit('getEditorCode',this.content)
    }
  }
};
</script> 

<style lang="less">
  .quill_box{
    .ql-toolbar.ql-snow{border-color:#dcdfe6;}
    .ql-container{height:200px !important;border-color:#dcdfe6;}
    .ql-snow .ql-picker-label::before {
      position: relative;
      top: -10px;
    }
    .ql-snow .ql-color-picker .ql-picker-label svg, .ql-snow .ql-icon-picker .ql-picker-label svg{position: relative;top:-6px;}
  }
</style>

四、引入使用：

<my-editor :contentDefault="contentDefault"></my-editor>

components:{
    myEditor:myEditorComponent
  },