http://uso.oschina.io/react-ueditor-demo/
https://github.com/uso51984/react-ueditor
react+ueditor(百度编辑器 )
更新日志
鉴于大家都在问怎么样能用import 导入。 2018年3月24号 23点，抽时间处理了一下。 demo已更新到代码库，目的抛砖引玉。下面说一下解决思路；
由于ueditor源码并非模块化设计，所以我们不能直接使用，只能修改源码。 其实修改源码也相对简单。 对外把UE变量export default UE
然后相关依赖的变量比如ueditor.config.js 里面的UEDITOR_CONFIG， I18N文件的对象配置等等依赖变量， 也从全局变量， 修改为模块成为主文件的依赖, 类似在
ueditor.all.js加入以下代码。 当然我个人觉得最好的还是下载源文件修改编译成自己想要的
import I18N from './lang/zh-cn/zh-cn';
import UEDITOR_CONFIG from './ueditor.config';
组件代码
import React from 'react';
import UE from '../../ueditor/ueditor.all';
class Ueditor extends React.Component {
static defaultProps = {
config: {}
}
constructor(props){
super(props);
this.state = {
};
}
componentDidMount(){
this.initEditor()
}
componentWillUnmount() {
// 组件卸载后，清除放入库的id
UE.delEditor(this.props.id);
}
initEditor() {
const { id, config } = this.props;
const ueEditor = UE.getEditor(this.props.id, config);
const self = this;
ueEditor.ready((ueditor) => {
if (!ueditor) {
UE.delEditor(id);
self.initEditor();
}
})
}
render(){
return (
<div id={this.props.id} name="content" type="text/plain"></div>
)
}
}
export default Ueditor;
调用
import Ueditor from '../base/Ueditor.js'
<Ueditor id="content" height="200" />
获取输入内容
<button onClick={this.testSubmit}>保存</button>
testSubmit(){
console.log(UE.getEditor('content').getContent())
}
调试中遇到问题
- 前端切换路由后，第二次进入页面不能渲染出编辑器
在组件卸载后清除编辑器库中存在的
id
componentWillUnmount() {
// 组件卸载后，清除放入库的id
UE.delEditor(this.props.id);
}
参考文献： http://blog.csdn.net/wei_shining/article/details/52344263
网友评论
https://www.jianshu.com/p/1d3d630ca0e6
感谢。
./src/ueditor/ueditor.config.js
Line 434: Unexpected use of 'self' no-restricted-globals