富文本.png
import React, { Component } from 'react'
// 引入 ECharts 主模塊
import echarts from 'echarts/lib/echarts';
// 引入柱狀圖
import 'echarts/lib/chart/bar';
import 'echarts/lib/chart/pie';
// 引入提示框和標(biāo)題組件
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> 富文本的相關(guān)引用 </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() {
// 基于準(zhǔn)備好的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 函數(shù)監(jiān)聽內(nèi)容的變化邻耕，并實時更新到 state 中
editor.customConfig.onchange = html => {
console.log(editor.txt.html())
this.setState({
// editorContent: editor.txt.text()
editorContent: editor.txt.html()
})
}
editor.customConfig.menus = [
'head', // 標(biāo)題
'bold', // 粗體
'fontSize', // 字號
'fontName', // 字體
'italic', // 斜體
'underline', // 下劃線
'strikeThrough', // 刪除線
'foreColor', // 文字顏色
'backColor', // 背景顏色
'link', // 插入鏈接
'list', // 列表
'justify', // 對齊方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入圖片
'table', // 表格
'video', // 插入視頻
'code', // 插入代碼
'undo', // 撤銷
'redo' // 重復(fù)
]
editor.customConfig.uploadImgShowBase64 = true
editor.customConfig.uploadImgServer = '/upload'; // 上傳圖片到服務(wù)器
// 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) {
// 圖片上傳之前觸發(fā)
// xhr 是 XMLHttpRequst 對象磁玉，editor 是編輯器對象身冬，files 是選擇的圖片文件
// 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
// return {
// prevent: true,
// msg: '放棄上傳'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// 圖片上傳并返回結(jié)果葵陵，圖片插入成功之后觸發(fā)
// xhr 是 XMLHttpRequst 對象纸型，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
// var url = result.data.url;
// alert(JSON.stringify(url));
// editor.txt.append(url);
// alert("成功");
},
fail: function (xhr, editor, result) {
// 圖片上傳并返回結(jié)果食铐，但圖片插入錯誤時觸發(fā)
// xhr 是 XMLHttpRequst 對象匕垫，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
alert("失敗");
},
error: function (xhr, editor) {
// 圖片上傳出錯時觸發(fā)
// xhr 是 XMLHttpRequst 對象璃岳，editor 是編輯器對象
// alert("錯誤");
},
// 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式年缎，可使用該配置
// （但是，服務(wù)器端返回的必須是一個 JSON 格式字符串Ａ蹇丁５ノ摺！否則會報錯）
customInsert: function (insertImg, result, editor) {
// 圖片上傳并返回結(jié)果犁柜，自定義插入圖片的事件（而不是編輯器自動插入圖片Ｖ摒！２雒濉）
// insertImg 是插入圖片的函數(shù)扒腕，editor 是編輯器對象，result 是服務(wù)器端返回的結(jié)果
// 舉例：假如上傳圖片成功后萤悴，服務(wù)器端返回的是 {url:'....'} 這種格式瘾腰，即可這樣插入圖片：
var url = result.data[0];
insertImg(url);
// result 必須是一個 JSON 格式字符串！８猜摹蹋盆！否則報錯
}
}
editor.create();
// 富文本回顯 比如后后臺請求的接口數(shù)據(jù) 用于渲染頁面
editor.txt.html( this.state.editorContent );
}
}
export default power;
默認的富文本怎么顯示？
editorContent 就是默認的數(shù)據(jù)
editor.txt.html( this.state.editorContent );
