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