.npm install vue-quill-editor --save

.npm install quill --save

.封装成子组件

<template>

  <quill-editor v-model="currentValue" ref="myQuillEditor" :options="editorOption" class="n-editor"></quill-editor>

</template>

<script>

import { quillEditor } from "vue-quill-editor";

import "quill/dist/quill.snow.css";

import "quill/dist/quill.bubble.css";

import "quill/dist/quill.core.css";

export default {

  name: "n-editor",

  components: {

    quillEditor

  },

  props: {

    value: {

      type: String

    },

    editorOption: {

      type: Object,

      default: function() {

        return {};

      }

    }

  },

  data() {

    return {

      currentValue: this.value

    };

  },

  watch: {

    value(v) {

      this.currentValue = v;

    },

    currentValue(v) {

      this.$emit("input", v);

    }

  }

};

</script>

<style>

.n-editor .ql-editor {

  height: auto;

  min-height: 320px;

}

</style>

<template>

<div>

  <span>{{content}}</span>

  <editor v-model="content"></editor>

  <button @click="content='abc'">reset to abc</button>

</div>

</template>

<script>

import editor from './Editor.vue'

export default {

  components:{

    editor

  },

  data() {

    return {

      content: ""

    };

  }

};

</script>