React 调用百度富文本 及存在的问题

实现：

        var React = require('react');
        // 将下载的百度富文本文件包导入到合适位置；这里放入的是dist目录下面
        require('../../dist/ueditor/ueditor.config.js');
        require('../../dist/ueditor/ueditor.all.min.js');
        require('../../dist/ueditor/lang/zh-cn/zh-cn.js');


        var UEditor = React.createClass({
            displayName: 'UEditor',

            // 设置默认的属性值
            getDefaultProps: function () {
                return {
                    disabled: false,
                    height: 500,
                    content: '',
                    id: 'editor'
                };
            },

            render: function () {
                return (
                    <div>
                        <script id={this.props.id} name="content" type="text/plain">
                        </script>
                    </div>
                );
            },

    调用初始化方法
            componentDidMount: function () {
                this.initEditor();
            },

    // 编辑器配置项初始化
            initEditor: function () {
                var id = this.props.id;
                var ue = UE.getEditor(id, {
                    // 工具栏，不配置有默认项目
                    toolbars: [[
                        'fullscreen', 'source', '|', 'undo', 'redo', '|',
                        'bold', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch',
                        '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
                        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                        'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                        'indent', '|',
                        'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                        'emotion',
                        'horizontal', '|', 'date', 'time', '|', 'insertimage'
                    ]],
                    lang: 'zh-cn',
                    // 字体
                    'fontfamily': [
                           {label: '', name: 'songti', val: '宋体,SimSun'},
                           {label: '', name: 'kaiti', val: '楷体,楷体_GB2312, SimKai'},
                           {label: '', name: 'yahei', val: '微软雅黑,Microsoft YaHei'},
                           {label: '', name: 'heiti', val: '黑体, SimHei'},
                           {label: '', name: 'lishu', val: '隶书, SimLi'},
                           {label: '', name: 'andaleMono', val: 'andale mono'},
                           {label: '', name: 'arial', val: 'arial, helvetica,sans-serif'},
                           {label: '', name: 'arialBlack', val: 'arial black,avant garde'},
                           {label: '', name: 'comicSansMs', val: 'comic sans ms'},
                           {label: '', name: 'impact', val: 'impact,chicago'},
                           {label: '', name: 'timesNewRoman', val: 'times new roman'}
                    ],
                    // 字号
                    'fontsize': [10, 11, 12, 14, 16, 18, 20, 24, 36],

    // 为编辑器实例添加一个路径，必需项
                    'UEDITOR_HOME_URL': '/react/dist/ueditor/',
                    // 上传图片时后端提供的接口
                    serverUrl: window.api_host + '/innerMessage/uploadImage',
                    enableAutoSave: false,
                    autoHeightEnabled: false,
                    initialFrameHeight: this.props.height,
                    initialFrameWidth: '100%',

    // 是否允许编辑
                    readonly: this.props.disabled
                });
                this.editor = ue;
                var self = this;


                this.editor.ready(function (ueditor) {
                    if (!ueditor) {

// 如果初始化后ueditor不存在删除后重新调用
                        UE.delEditor(self.props.id);
                self.initEditor();
                    }
                });
            },
            // 获取编辑器的内容
            getContent: function () {
                if (this.editor) {
                    return this.editor.getContent();
                }
                return '';
            },
            /**
             * 写入内容｜追加内容
             * @param {Boolean} isAppendTo    [是否是追加]
             * @param {String}  appendContent [内容]
             */
            setContent: function (appendContent, isAppendTo) {
                if (this.editor) {
                    this.editor.setContent(appendContent, isAppendTo);
                }
            },
            // 获取纯文本
            getContentTxt: function () {
                if (this.editor) {
                    return this.editor.getContentTxt();
                }
                return '';
            },
            // 获得带格式的纯文本
            getPlainTxt: function () {
                if (this.editor) {
                    return this.editor.getPlainTxt();
                }
                return '';
            },
            // 判断是否有内容
            hasContent: function () {
                if (this.editor) {
                    return this.editor.hasContents();
                }
                return false;
            },
            // 插入给定的html
            insertHtml: function (content) {
                if (this.editor) {
                    this.editor.execCommand('insertHtml', content);
                }
            },
            // 使编辑器获得焦点
            setFocus: function () {
                if (this.editor) {
                    this.editor.focus();
                }
            },
            // 设置高度
            setHeight: function (height) {
                if (this.editor) {
                    this.editor.setHeight(height);
                }
            }
        });


        module.exports = UEditor;

实现中的问题及解决方法

       1.上传图片时的跨域问题

在源码里 有 header['X_Requested_With'] = 'XMLHttpRequest';

后端需要配置    header('Access-Control-Allow-Headers', 'AccessToken, Content-Type, WebOrigin,X-Requested-With,X_Requested_With');

       2. 进入文本编辑界面编辑器没有加载出来

可能原因： 放置编辑器的容器id, 容器下的编辑器已经存在

解决方法如代码所示

this.editor.ready(function (ueditor) {

             if (!ueditor) {

// 如果初始化后ueditor不存在删除后重新调用
                UE.delEditor(self.props.id);
                self.initEditor();
             }
         })

3.注意这两个参数配置

'UEDITOR_HOME_URL': '/react/dist/ueditor/', // 编辑器实例路径,即ueditor文件包所放置的位置

   serverUrl: window.api_host + '/innerMessage/uploadImage', // 后端提供加载图片接口，这是个共同接口接口包括了后端配置的config.json文件 通过url中action

值不同来区分（config|uploaimage 等）