富文本.png
import React, { Component } from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 富文本
import E from 'wangeditor'
class power extends Component {
constructor(props) {
super(props);
this.state = {
collapsed: true,
// 富文本
editorContent: "<div>默认值</div>"
}
}
render() {
return (
<div>
<p> 富文本的相关引用 </p>
{/* <div id="main" style={{ width: "100%", height: "600px" }}></div> */}
{/* <div id="pie" style={{ width: "600px", height: "400px" }}></div> */}
{/* 富文本 */}
<div className="shop">
<div className="text-area" >
<div ref="editorElemMenu"
style={{ backgroundColor: '#f1f1f1', border: "1px solid #ccc" }}
className="editorElem-menu">
</div>
<div
style={{
padding: "0 10px",
overflowY: "hidden",
height: 600,
border: "1px solid #ccc",
borderTop: "none"
}}
ref="editorElemBody" className="editorElem-body">
</div>
</div>
</div>
</div>
)
}
componentDidMount() {
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// // 绘制图表
// myChart.setOption({
// title: { text: "柱形图" },
// tooltip: {},
// xAxis: {
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
// },
// yAxis: {},
// series: [{
// name: '销量',
// type: 'bar',
// data: [5, 20, 36, 10, 10, 20]
// }]
// });
// 富文本
const elemMenu = this.refs.editorElemMenu;
const elemBody = this.refs.editorElemBody;
const editor = new E(elemMenu,elemBody)
// 使用 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', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.uploadImgServer = '/upload'; // 上传图片到服务器
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 1;
// 自定义文件名
editor.customConfig.uploadFileName = 'editor_img';
// 将 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) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
// var url = result.data.url;
// alert(JSON.stringify(url));
// editor.txt.append(url);
// alert("成功");
},
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.data[0];
insertImg(url);
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.create();
// 富文本回显 比如后后台请求的接口数据 用于渲染页面
editor.txt.html( this.state.editorContent );
}
}
export default power;
默认的富文本怎么显示？
editorContent 就是默认的数据
editor.txt.html( this.state.editorContent );
