1、先安装依赖
npm install wangeditor
2、在文件入口引入,并定义一个变量
import E from 'wangeditor' // 引用
let aEditor
3、创建方法
// wangeditor编辑器
const elemMenu = this.refs.editorElemMenu;
const elemBody = this.refs.editorElemBody;
const editor = new E(elemMenu,elemBody)
// 变量赋值
aEditor= editor
// 使用 onchange 函数监听内容的变化,并实时更新到 state 中
// editor.customConfig.onchange = html => {
// // // console.log(editor.txt.html())
// this.setState({
// // editorContent: editor.txt.text()
// editorContent: editor.txt.html()
// })
// }
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'table', // 表格
'image', // 插入图片
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
// editor.customConfig.uploadImgShowBase64 = true
// editor.customConfig.uploadImgServer = '/upload' // 上传图片到服务器
editor.customConfig.uploadImgServer = '上传图片链接'; // 上传图片到服务器
// 3M,限制图片大小
editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 5;
// 自定义文件名
editor.customConfig.uploadFileName = 'file';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 5000;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// console.log('成功',result)
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// var url = result.url;
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// alert("失败");
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// alert("错误");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.url;
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
};
editor.create()
5、界面样式
<div className="text-area" >
<div ref="editorElemMenu"
style={{backgroundColor:'#f1f1f1',border:"1px solid #ccc"}}
className="editorElem-menu">
</div>
<div style={{ padding:"0 10px", height: 350 }}
ref="editorElemBody" className="editorElem-body">
</div>
</div>
6、获取富文本编辑器内容
let html = aEditor.txt.html()
7、清空富文本编辑器
aEditor.txt.clear();