前端好用的工具----wangEditor（富文本编辑器）

一、介绍：

wangEditor是一款开源的，有详细中文文档，上手使用起来比较容易且具有良好的拓展性，基于 slate 内核开发，无框架依赖的富文本编辑器。在官网有详细的指南、视频教程、相关的Demo示例等，非常丰富详细。

官网地址：www.wangeditor.com/

二、安装过程碰到的错误：

1、问题描述：

vue版本：2.3.3，按照官网步骤安装使用，安装完wangEditor，这里因为要支持视频上传，所以我引入的是"@wangeditor/editor": "^5.1.23"

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

后出现了# webpack3 报错 Error in ./node_modules/@wangeditor/editor/dist/index.esm.js

将引入注释掉之后报错信息消失。

2、解决方法：

找到项目中的webpack.base.conf.js文件，找到babel-loader添加以下代码装载wangeditor

resolve('/node_modules/@wangeditor')

然后对node_modules删除后重新安装启动项目即可。

三、使用示例：

涉及功能： 工具栏配置、图片上传、视频上传等； 代码如下：

<template>
<div class="rich-text-editor" ref="richTextEditorRef">
<!-- 菜单栏 -->
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>

<!-- 编辑器 -->
<Editor
style="height: 400px; overflow-y: hidden;"
v-model="html"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onCreated"
@onChange="onChange"
/>
</div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
name: "RichTextEditor",
components: { Editor, Toolbar },
props: {
taskContent: { //父组件传入默认内容
type: String,
default: ""
},
textDisabled: { // 控制富文本是否能够编辑
type: Boolean,
defauly: false
}
},
data() {
return {
// 真正的编辑器里的内容
editorContent: "",
editor: null,
html: "", // 富文本内容
isDisabled: false,// 控制富文本是否能够编辑
toolbarConfig: { // 工具栏配置
excludeKeys: [
// 隐藏全屏按钮
"fullScreen"
]
},
editorConfig: { // 编辑器配置
placeholder: "请输入内容...",
showFullScreen: "false",
disable: false,
MENU_CONF: {
uploadImage: { // 图片上传配置
fieldName: "file", // 上传图片名字
server: "图片上传地址"
meta: {
referId: "",
referType: ""
},
customInsert(res, insertFn) { 
// 通过该方法获取接口返回参数将图片插入编辑器中
let url = "图片上传后生成的url"
insertFn(url);//在编辑器中插入图片
}
},
uploadVideo: {
fieldName: "file",
server: "视频上传地址"
meta: {
referId: "",
referType: ""
},
customInsert(res, insertFn) {
let url = "视频上传成功生成的url"
insertFn(url); //在编辑器中插入视频
}
}
}
},
mode: "default", // or 'simple'控制工具栏模式为简洁或者默认
};
},
watch: {
taskContent(val) {
this.html = val;
},
textDisabled: {
handler: function(newVal, oldVal) {
if (newVal != null) {
this.isDisabled = newVal;
}
},
immediate: true,
deep: true
}
},
methods: {
onCreated(editor) {
this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
if (this.isDisabled) {
this.editor.disable();
} else {
this.editor.enable();
}
},

onChange(editor) {
this.$emit("向父组件传值", this.html);
}
},

beforeDestroy() {
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁编辑器
}
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="less" scoped>
.rich-text-editor {
width: 100%;
height: 100%;
}
</style>

以上代码封装完成上传视屏的富文本编辑器子组件，父组件直接根据业务需要调用即可。示范效果如下：

问题：实现之后发现富文本编辑器无法删除和换行，后面查看了文档解决了，代码如下：

onChange(editor) {
  document.onkeydown = function(event) {
    let e = event || window.event;
    if (e.code == "Enter") {
    editor.insertBreak();
    }
  };
}