使用Vue自带的富文本编辑器vue-quill-editor

1、下载npm install vue-quill-editor

2、再安装依赖项npm install quill

3、main.js引入

  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)

4、页面使用：案例

  <template>
    <div>
      <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>
      <el-button type="primary" @click="submit">提交</el-button>编辑器输入的内容：
      <div v-html="content"></div>原HTML：
      <div>{{value}}</div>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        content: "", //编辑器内容
        editorOption: {},
        value: ""
      };
    },
    methods: {
      submit() {
        this.value = this.content;
      }
    }
  };
  </script>
  <style lang="scss">
  // 修改编辑器默认高度
  .quill-editor .ql-editor {
    min-height: 200px;
  }
  </style>

结语：到此已经可以初步正常使用，其他特殊定义及功能用到再进行补充！
备注：本文参考https://www.cnblogs.com/ZaraNet/p/10209226.html