react+ueditor(百度编辑器 )

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 (
      

    )
  }
}
export default Ueditor;

调用

import Ueditor from '../base/Ueditor.js'
 

获取输入内容

保存
testSubmit(){
    console.log(UE.getEditor('content').getContent())
}

调试中遇到问题

• 前端切换路由后，第二次进入页面不能渲染出编辑器

在组件卸载后清除编辑器库中存在的id

  componentWillUnmount() {
    // 组件卸载后，清除放入库的id
    UE.delEditor(this.props.id);
  }

参考文献： http://blog.csdn.net/wei_shining/article/details/52344263