http://uso.oschina.io/react-ueditor-demo/

https://github.com/uso51984/react-ueditor

react+ueditor(百度編輯器 )

更新日志 2018-10-14 (方案一)

由于百度的富文本編輯器ueditor沒(méi)有模塊化支持，所以在commonjs或者es6中無(wú)法正常的引用。 所以在react中需要單獨(dú)做處理，一種方案是修改源碼來(lái)支持， 這種方案缺點(diǎn)就是需要修改源碼地方比較多， 不利于更新ueditor的版本，具體說(shuō)明在以前的更新也就是方案二種有說(shuō)明。這里我們說(shuō)另外一種我覺(jué)得更好的方法， 動(dòng)態(tài)加載ueditorjs. 這里上一些關(guān)鍵代碼

  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 默認(rèn)值
    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（方案二）

鑒于大家都在問(wèn)怎么樣能用import 導(dǎo)入。 2018年3月24號(hào) 23點(diǎn)，抽時(shí)間處理了一下。 demo已更新到代碼庫(kù)，目的拋磚引玉。下面說(shuō)一下解決思路；
由于ueditor源碼并非模塊化設(shè)計(jì)，所以我們不能直接使用，只能修改源碼。 其實(shí)修改源碼也相對(duì)簡(jiǎn)單。 對(duì)外把 UE 變量export default UE
然后相關(guān)依賴(lài)的變量比如ueditor.config.js 里面的UEDITOR_CONFIG， I18N文件的對(duì)象配置等等依賴(lài)變量， 也從全局變量， 修改為模塊成為主文件的依賴(lài), 類(lèi)似在
ueditor.all.js加入以下代碼。 當(dāng)然我個(gè)人覺(jué)得最好的還是下載源文件修改編譯成自己想要的

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() {
    // 組件卸載后，清除放入庫(kù)的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;

調(diào)用

import Ueditor from '../base/Ueditor.js'
<Ueditor  id="content" height="200" /> 

獲取輸入內(nèi)容

<button onClick={this.testSubmit}>保存</button>
testSubmit(){
    console.log(UE.getEditor('content').getContent())
}

調(diào)試中遇到問(wèn)題

• 前端切換路由后，第二次進(jìn)入頁(yè)面不能渲染出編輯器

在組件卸載后清除編輯器庫(kù)中存在的id

  componentWillUnmount() {
    // 組件卸載后，清除放入庫(kù)的id
    UE.delEditor(this.props.id);
  }

參考文獻(xiàn)： http://blog.csdn.net/wei_shining/article/details/52344263