VUE使用富文本编辑器插件

1、npm安装编辑器组件

npm install vue-quill-editor --save

2、在components文件夹创建ue.vue组件，如下

<!-- 组件代码如下 -->
<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data() {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy()
    }
  }

</script>

3、页面代码部分

<template>
  <div>
    <el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption">
      </quill-editor>
    </el-card>
  </div>
</template>

<script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

	export default {
	  name: "ActicleInfo",
	  components: {
	    quillEditor
	  },
    data() {
      return {
        content: null,
        editorOption: {}
      }
    }
  }

</script>

效果如下：

可以插入图片，图片被转码，可以插入外部链接视频，学习使用，已被后期遗忘