vue中富文本编辑框

1.npm install vue-quill-editor --save
2.npm install quill --save
3.封装成子组件
<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>

 

转载于:https://www.cnblogs.com/huanhuan55/p/10490610.html