百度的富文本编辑器 ueditor，轻量，可定制。逐渐成为前端主流的富文本编辑器
react项目中使用ueditor，如何安装、配置
1、下载 ueditor
/fex-team/ueditor
运行后会生成一个dist文件，将改文件复制到 项目的 public 目录下，并重命名为 ueditor
2、在public/index.html中引入配置文件
注意，此处的路径需要改为项目的实际路径，否则 富文本编辑器会加载不出来
<!-- 配置文件 --><script type="text/javascript" src="%PUBLIC_URL%/ueditor/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript" src="%PUBLIC_URL%/ueditor/ueditor.all.js"></script><!-- 语言文件 --><script type="text/javascript" src="%PUBLIC_URL%/ueditor/lang/zh-cn/zh-cn.js"></script>
此时在项目的控制台中 输入 window.UE 就会看到 UE 已经成功挂载到window下了
这样就可以在项目中使用 UE 中的属性和方法了
如果 window.UE 为 undefined
则考虑是否时配置文件的引入路径是否正确
检查下图路径是否能成功打开
3、写一个 Ueditor 组件
// components/Ueditor/index.jsimport React from 'react';import api from '@/api';const UE = window.UE;class Ueditor extends ponent {constructor(props) {super(props);this.state = {content: '',editor: ''};this.timer = null;}componentDidMount() {this.initEditor()}componentWillUnmount() {// 组件卸载后，清除放入库的idif (typeof (UE.getEditor(this.props.id)) != 'undefined') {UE.getEditor(this.props.id).destroy();clearTimeout(this.timer)}}initEditor() {/*初始化编辑器*/const { id, contentChange } = this.props;const ueEditor = UE.getEditor(this.props.id, {// 编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 400,// 初始容器宽度initialFrameWidth: '100%',});const self = this;//图片上传mands['uploadimg'] = {execCommand: function () {self.inputPicFile.click()},queryCommandState: function () { }};ueEditor.addListener('contentChange', () => {contentChange()});//视频上传mands['uploadvideo'] = {execCommand: function () {self.inputVideoFile.click()return true;},queryCommandState: function () { }};ueEditor.ready((ueditor) => {if (!ueditor) {UE.delEditor(id);self.initEditor();}});let editor = ueEditor;this.setState({ editor });}setVal(con) {let { editor } = this.state;editor.ready((ueditor) => {if (ueditor) {con = con.replace(/video-js\" src/gi, "\" _url")con = con.replace(/<video/gi, "<img src='/manage/ueditor/themes/default/images/spacer.gif' style='background:url(/manage/ueditor/themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;'")con = con.replace(/<\/video>/gi, "</img>")editor.setContent(con);clearTimeout(this.timer)}});this.timer = setTimeout(function () {editor.setContent(con);}, 700)}getVal() {let { editor } = this.state;let content = editor.getContent();return content;}onChangeImg() {var _this = this;var file = this.inputPicFile.files[0]if(file){api.uploadImage(file).then((res) => {const { data } = res;let editor = _this.state.editor;editor.execCommand('inserthtml', `<img src=${data.serverUrl + data.url} />`);})}this.inputPicFile.value = '';}onChangeVideo() {var _this = this;var file = this.inputVideoFile.files[0]if(file){api.uploadFile(file).then((res) => {const { data } = res;let editor = _this.state.editor;editor.execCommand('insertHtml',`<img _url=${data.serverUrl + data.url} class="edui-upload-video" width="420" height="280" src="/manage/ueditor/themes/default/images/spacer.gif" style="background:url(/manage/ueditor/themes/default/images/videologo.gif) no-repeat center center; border:1px solid gray;">`);})}this.inputVideoFile.value = '';}render() {let { content, id } = this.props;return (<React.Fragment><textarea id={id}defaultValue={content}onChange={this.getVal} /><input onChange={() => this.onChangeImg()} type="file" ref={(n) => { this.inputPicFile = n }} style={{ display: 'none' }} /><input onChange={() => this.onChangeVideo()} type="file" ref={(n) => { this.inputVideoFile = n }} style={{ display: 'none' }} /></React.Fragment>)}}export default Ueditor;
4、在页面中使用 ueditor 组件
import React, { Component } from 'react'import { Button, message } from 'antd';import api from '@/api';import { withRouter } from 'react-router-dom';import Ueditor from '@/components/Ueditor';class CompanyProfile extends Component {constructor(props) {super(props)this.state = {companyIntro: ''}}// TODO....listCompanyProfile() {api.listCompanyProfile().then((res) => {if (res.code == 0) {this.setState({companyIntro: panyIntro}, () => {panyProfile.setVal(panyIntro)})}})}componentDidMount() {this.listCompanyProfile()}render() {return (<React.Fragment ><Ueditor id="companyProfile" ref="companyProfile" contentChange={this.contentChange} /></React.Fragment>)}}export default withRouter(CompanyProfile);
