富文本编辑器 - WangEditorv4

WangEditorv4富文本编辑器

重要的事情说三遍：直接使用 wangEditor v5，直接使用 wangEditor v5，直接使用 wangEditor v5。附官网地址：wangEditor v5

效果图：是一个el-dialog 弹窗

npm 安装 npm i wangeditor --save

不解释直接上代码： 说明下这个功能用的vue2项目中，该组件可以直接使用，提供双向数据绑定

Editor.vue 封装组件

<template>
  <div ref="editor"></div>
</template>
<script>
import Editor from "wangeditor"

/**
 * 富文本
 */
export default {
  name: "Editor",
  props: {
    value: {
      type: String,
      default: ""
    },
    height: {
      type: Number,
      default: 300
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: null,
      editorContent: ""
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        if (this.editor && val !== this.editor.txt.html()) {
          this.editor.txt.html(val)
        }
      }
    },
    disabled(val) {
      if (this.editor) {
        val ? this.editor.disable() : this.editor.enable()
      }
    }
  },
  mounted() {
    this.initEditor()
  },
  beforeDestroy() {
    // 组件销毁时销毁编辑器
    if (this.editor) {
      this.editor.destroy()
      this.editor = null
    }
  },
  methods: {
    initEditor() {
      this.editor = new Editor(this.$refs["editor"])
      this.$nextTick(() => {
        this.editor.txt.html(this.value)
      })
      // 定义要排除的菜单项
      const excludeMenus = ["strikeThrough", "link", "emoticon", "video", "code", "quote"]

      this.editor.config.menus = this.editor.config.menus.filter((menu) => !excludeMenus.includes(menu))

      // 配置全屏功能按钮是否展示
      this.editor.config.showFullScreen = false
      // 设置编辑区域高度为
      this.editor.config.height = this.height
      // 开启选择本地图片，编辑器用 base64 格式显示图片。
      this.editor.config.uploadImgShowBase64 = true
      // 隐藏插入网络图片的功能
      this.editor.config.showLinkImg = false
      // 获取值
      this.editor.config.onchange = function (html) {
        // 需要改变this指向域
        this.$emit("input", html)
        this.$emit("change", html)
      }.bind(this)
      this.editor.create()
      // 只读
      if (this.disabled) {
        this.editor.disable()
      }
    }
  }
}
</script>

TableEditorEdit.vue
说明：下面代码是我封装用于表格展示组件直接关注重点就行<Editor v-model="editorValue" :height="450" :disabled="disabled" />

    <template>
  <div class="TableEditorEdit" :style="{ justifyContent: value ? 'space-between' : 'flex-end' }" @click.top>
    <template v-show="value">
      <el-tooltip effect="dark" placement="top-start">
        <template slot="content">
          <p style="max-width: 500px; padding: 0px !important">{{ value }}</p>
        </template>
        <span class="overflowEllipsis">{{ value }}</span>
      </el-tooltip>
    </template>
    <!-- icon -->
    <i class="el-icon-rank icon" @click="onClick" />
    <!-- dialog -->
    <el-dialog v-dialogDrag v-if="visible" :visible="visible" :title="title" width="60%" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" :modal="modal" @close="onCancel">
      <div style="height: 500px">
        <Editor v-model="editorValue" :height="450" :disabled="disabled" />
      </div>
      <span slot="footer" class="dialog-footer" v-if="!disabled">
        <el-button @click="onCancel">取 消</el-button>
        <el-button type="primary" @click="onConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Editor from "@/views/modules/sfsh/common/Editor"
/**
 * 适用于表格富文本编辑
 */
export default {
  name: "TableEditorEdit",
  components: { Editor },
  props: {
    // 表格展示字段
    value: {
      type: String,
      default: ""
    },
    // 富文本编辑字段
    editValue: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "提示"
    },
    modal: {
      type: Boolean,
      default: true
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      editorValue: ""
    }
  },
  mounted() {},
  methods: {
    onClick() {
      this.visible = true
      this.editorValue = JSON.parse(JSON.stringify(this.editValue))
    },
    onCancel() {
      this.visible = false
      this.editorValue = ""
    },
    onConfirm() {
      this.visible = false
      this.$emit("change", this.editorValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.TableEditorEdit {
  width: 100%;
  display: flex;
  flex-direction: row;

  a {
    display: flex;
    flex: 1;
  }

  .icon {
    display: flex;
    margin-left: 5px;
    margin-top: auto;
    cursor: pointer;
  }

  ::v-deep .el-dialog__header {
    text-align: left;
  }
}
</style>

上面组件效果图： 啰嗦一句，v4版本使用中遇到的各种问题最好的方法是直接AI。还有不要去官网看API。写的太简单了。 说下遇到的一个问题：富文本在使用的时候发现光标直接无法定位，输入一下就跑最后了。特别是表格（其实问题就在于双向数据绑定导致的，找了好久）