**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。写的太简单了。说下遇到的一个问题：富文本在使用的时候发现光标直接无法定位，输入一下就跑最后了。特别是表格（其实问题就在于双向数据绑定导致的，找了好久）