react+ueditor(百度编辑器 )

uso.oschina.io/react-uedit…

github.com/uso51984/re…

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);
  }

参考文献： blog.csdn.net/wei_shining…