摘要：重要的事情说三遍：直接使用 wangEditor v5，直接使用 wangEditor v5，直接使用 wangEditor v5。附官网地址 ：wangEditor v5
**
重要的事情说三遍：直接使用 wangEditor v5，直接使用 wangEditor v5，直接使用 wangEditor v5。附官网地址 ：wangEditor v5
Editor.vue 封装组件
#技术分享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 } } } }TableEditorEdit.vue 说明：下面代码是我封装用于表格展示组件直接关注重点就行
{{ value }}
{{ value }}取 消确 定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) } } } .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; } }上面组件效果图：啰嗦一句，v4版本使用中遇到的各种问题最好的方法是直接 AI。还有不要去官网看 API。写的太简单了。说下遇到的一个问题：富文本在使用的时候发现光标直接无法定位，输入一下就跑最后了。特别是表格（其实问题就在于双向数据绑定导致的，找了好久）
来源：墨码行者
免责声明：本站系转载，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与本站联系，我们将在第一时间删除内容!
