React 中如何使用wangEditor富文本(可預覽)
常見富文本 ：wangEditor 、 summernote 、ckeditor 、quill、 medium-editor 、百度 UEditor、 slate、
一 、 導入wangeditor
npm導入wangEditor：
npm install wangeditor --save
二 、 引入wangeditor
引入wangeditor:
三 、 建立render
render() {
return (
<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:"scroll",
height:300,
border:"1px solid #ccc",
borderTop:"none"
}}
ref="editorElemBody" className="editorElem-body">
</div>
</div>
</div>
);
}
四 、 執行個體化編輯器
componentDidMount() {
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.create()
};
注意點一：
此處需要十分注意的是 editor.customConfig.menus 這個屬性設定，這個屬性是配置你的富文本編輯器所需要的功能的，如果不配置的話，那麼界面就不會有上面的加粗斜體上傳圖檔之類的功能條了，當然，如果你不需要這麼多功能的話，也可以注釋掉一部分。
注意點二：
editor.customConfig.uploadImgShowBase64 = true 這個屬性是配置目前是否需要設定上傳圖檔在前端轉換成base64的，如果你目前對接的模式是需要先上傳圖檔到自己的伺服器上的話，那麼請檢視官方文檔，文檔内有相關代碼
連結: https://www.kancloud.cn/wangfupeng/wangeditor3/332599
editor.customConfig.uploadImgServer = 'https://gtacms.gtarcade.com/backend/editor/index?action=uploadimage'; // 上傳圖檔到伺服器
// 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 格式字元串！！！否則報錯
}
}
以上配置就可以在前端進行使用，看下效果：
展示文本是以一串html字元串，原封不動的包含标簽顯示到頁面上，用dangerouslySetInnerHTML展示可以：
五 、 整體代碼
import React, { Component } from 'react';
import E from 'wangeditor'
//import { inject, observer } from 'mobx-react'
//import { withRouter } from 'react-router-dom'
//@withRouter @inject('appStore') @observer
class Editor extends React.Component {
constructor(props) {
super(props);
this.state = {
editorContent:''
};
}
componentDidMount() {
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.create()
};
render() {
return (
<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:"scroll",
height:300,
border:"1px solid #ccc",
borderTop:"none"
}}
ref="editorElemBody" className="editorElem-body">
</div>
</div>
</div>
);
}
}
export default Editor;
![安卓實作富文本（1）[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)