vue富文本编辑器

1、vue-quill-editor安装

    npm install vue-quill-editor -S
    npm install quill -S

2、vue-quill-editor引入

• 在main.js中进行引入

    import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    Vue.use(VueQuillEditor)

3、vue-quill-editor组件

• 这里使用了v-modal自定义组件

      <div class="productEditQuill-wrap">
      </div>
    export default {
      name: "",
      components: {},
      props: {
        contentVal: {
          type: String,
          required: false,
          default: ``
        },
        editorOption: {
          type: Object,
          required: false,
          default: () =&gt; {}
        }
      },
      model: {
        prop: 'contentVal', // 注意，是prop
        event: 'valueChange'
      },
      data () {
        return {
          content: ``
        };
      },
      computed: {
        editor () {
          return this.$refs.myQuillEditor.quill;
        }
      },
      created () {},
      mounted () {},
      methods: {
        onEditorReady (editor) {
          // 准备编辑器
        },
        onEditorBlur () {
          this.$emit('valueChange', this.content)
        }, // 失去焦点事件
        onEditorFocus () {
          this.$emit('valueChange', this.content)
        }, // 获得焦点事件
        onEditorChange () {
          this.$emit('valueChange', this.content)
        } // 内容改变事件
      }
    };

4、vue-quill-editor使用

      <div>
      </div>
      import productEditQuill from '../components/productEdit/productEditQuill'
      export default {
        components: {
          productEditQuill
        },
        data () {
          return {
            editContent: ``
          }
        }
      }