前端富文本编辑器quill与uEditor在Vue2.0中的使用

vue-quill编辑器

https://www.kancloud.cn/liuwave/quill (中文官网)

使用 yarn add vue-quill 即可快速安装

<template>
  <div :class="prefixCls">
    <div class="edit_container">
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </div>
  </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: 'QuillEditor',
  components: {
    quillEditor,
  },
  props: {
    prefixCls: {
      type: String,
      default: 'ant-editor-quill',
    },
    // 表单校验用字段
    // eslint-disable-next-line
    value: {
      type: String,
      //接受父组件的数据
    },
    //富文本配置项
    editorOption: {
      type: Object,
    },
  },
  mounted() {
    this.$refs.myQuillEditor.quill.enable(false)
    this.content = this.value
    this.$refs.myQuillEditor.quill.enable(true)
  },
  data() {
    return {
      content: null,
    }
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill
    },
  },
  methods: {
    onEditorBlur(quill) {
      // console.log('editor blur!', quill)
      // console.log(this.oldVal)
    },
    onEditorFocus(quill) {
      // console.log('editor focus!', quill)
      // console.log(quill)
    },
    onEditorReady(quill) {
      // console.log('editor ready!', quill)
    },
    onEditorChange({ quill, html, text }) {
      sessionStorage.setItem("editorText",html)
      // this.$emit('change', html, text)
      //此处可返回父组件html,text格式的数据
    },
    // 清空
    clear() {
      this.content = ''
    },
  },
  watch: {
    value(New, Old) {
      this.content = New
    },
  },
}
</script>

<style lang="less" scoped>
@import url('../index.less');

/* 覆盖 quill 默认边框圆角为 ant 默认圆角，用于统一 ant 组件风格 */
.ant-editor-quill {
  /deep/ .ql-toolbar.ql-snow {
    border-radius: @border-radius-base @border-radius-base 0 0;
  }
  /deep/ .ql-container.ql-snow {
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }
}
.quill-editor {
  height: 380px;
}
</style>

在当前光标后插入图片 | | 文字

		//获取编辑器实例
       let quill = this.$refs.QuillEditor.$refs.myQuillEditor.quill
       //获取当前位置
       let length = quill.selection.savedRange.index
       //插入图片
       quill.insertEmbed(length, 'image',  '图片src')
       //光标移到插入元素后一位
      quill.setSelection(length + 1)

踩坑记录: 组件化Quill编辑器传入value用来设置编辑器的值,修改过后通过this.$emit传出,由于组件watch中动态修改编辑器的值,每输入一个字母就会进入一个循环,父传子→子传父，导致编辑器的光标每输入一个字母就回到首位,删除同理,最终通过sessionStorage解决了该bug(父组件在点击提交的时候取出富文本的值)

赋值: props→value
取值: onEditorChange→emit || sessionStorage
清空: 父组件.ref.clear()

百度uEditor编辑器

http://fex.baidu.com/ueditor (中文文档)

百度编辑器需要在官网下载,选择自己需要的版本,通过引入或安装的方式使用,需要注意的是,引入的方式必须引入css文件,大部分教程都没有引入css文件,导致编辑器显示不正常

安装的方式: yarn add vue-ueditor-wrap

引入的方式教程如下:

选择jsp版本会得到如下文件,放在public中
在index.html中引入js:

在main.js中引入css

// 导入编辑器
import "../public/UE/themes/default/css/ueditor.css"

编辑器组件

<template>
  <div>
    <script :id="randomId" type="text/plain" name="container"></script>
  </div>
</template>

export default {
  name: 'UE',
  data() {
    return {
      /** 编辑器实例 */
      editor: null,
      /** 每个编辑器生成不同的id,以防止冲突 */
      randomId: 'editor_1' + parseInt(Math.random() * 10000 + 1),
      ready: false,
      defaultText: '',
    }
  },
  props: {
    defaultMsg: {
      type: String,
      // default
    },
    config: {
      type: Object,
      // default: () => ({
      //   serverUrl: `${api.base}/ueditor/`
      // })
    },
  },
  watch: {
    defaultMsg(newVal, oldVal) {
      if (newVal != null && this.ready) {
        this.editor.setContent(newVal)
      }
    },
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    /** 初始化编辑器 */
    initEditor() {
      this.$nextTick(() => {
        // 获取richText实例
        this.editor = window.UE.getEditor(this.randomId, this.config)
        this.editor.addListener('ready', () => {
          this.ready = true
          this.editor.setContent(this.defaultMsg)
        })
      })
    },
    // 插入文本
    insert(text) {
      this.editor.execCommand('inserthtml', `<p>${text}</p>`);
    },
    //获取值
    getUEContent() {
      return this.editor.getContent()
    },
    // 清空
    clear() {
      this.editor.addListener('ready', () => {
        this.ready = true
        this.editor.setContent('')
      })
    },
  },
  destroyed() {
    this.editor.destroy()
  },
}
</script>

踩坑记录: 必须修改ueditor.config.js中的配置项,否则上传图片会报错(和后端沟通)

赋值: props→defaultMsg
取值: 父组件.ref.getUEContent()
清空: 父组件.ref.clear()
插入文本&&父组件设置编辑器默认值: this.$refs.uEditor.insert(text)