vue 使用 vue-quill-editor富文本编辑器

1. 安装依赖包

npm install vue-quill-editor --save

2. 局部引入使用

//引入引入样式文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

// 在components中注册组件
export default {
  components: {
    quillEditor
  }
}

3.全局引入

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor, /* { default global options } */)

3 使用

<template>
  <div class="edit_container">
   <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
  </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 {
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      editorOption: {}
    }
  },
  methods: {
    onEditorBlur(){}, // 失去焦点事件
    onEditorFocus(){}, // 获得焦点事件
    // 内容改变事件
    onEditorChange(){
        // 富文本中的内容，这边可以将富文本内容进行操作
        let html = editor.html; 
        // 例如将获取到的文本中的图片或视频的尺寸改为宽100%，高度自适应，一般在移动端避免尺寸不一致
        html = html.replace(/\<img/gi, '<img style="max-width: 100%;width: 100%;height:auto"');
        html = html.replace(/\<video/gi, '<video style="max-width: 100%;width: 100%;height:auto"');
  }, 
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
  }
}
</script>

image.png