http://uso.oschina.io/react-ueditor-demo/
https://github.com/uso51984/react-ueditor
react+ueditor(百度编辑器 )
更新日志 2018-10-14 (方案一)
由于百度的富文本编辑器
ueditor没有模块化支持，所以在commonjs或者es6中无法正常的引用。 所以在react中需要单独做处理，一种方案是修改源码来支持， 这种方案缺点就是需要修改源码地方比较多， 不利于更新ueditor的版本，具体说明在以前的更新也就是方案二种有说明。这里我们说另外一种我觉得更好的方法， 动态加载ueditorjs. 这里上一些关键代码
static defaultProps = {
value: '',
onChange: () => { },
ueditorUrl: 'https://uso.oschina.io/react-ueditor-demo/ueditor.all.js',
ueditorConfigUrl: 'https://uso.oschina.io/react-ueditor-demo/ueditor.config.js',
ueditorHomeUrl: '',
ueditorIframeUrl: '',
editorConfig: {}, // ueditor 默认值
className: '',
prefix: 'bee',
}
loadUEditorScript() {
if (window[UEDITOR_LOADED_KEY] !== undefined) {
return;
}
window[UEDITOR_LOADED_KEY] = 1; // 加载中
let {
ueditorHomeUrl,
ueditorIframeUrl,
ueditorUrl,
ueditorConfigUrl,
} = this.props;
window.UEDITOR_HOME_URL = ueditorHomeUrl;
window.UEDITOR_IFRAME_URL = ueditorIframeUrl;
this.createScriptDom(ueditorConfigUrl, () => {
this.createScriptDom(ueditorUrl, () => {
window[UEDITOR_LOADED_KEY] = 2; // 加载完成
});
});
}
createScriptDom(url, callback) {
const scriptDom = document.createElement('script');
scriptDom.type = 'text/javascript';
scriptDom.async = true;
scriptDom.src = url;
scriptDom.onload = function () {
callback();
}
document.body.appendChild(scriptDom);
}
更新日志 2018-3-24（方案二）
鉴于大家都在问怎么样能用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
