Reactjs与TinyMCE编辑器代码插件

时间:2015-05-13 18:21:53

标签: tinymce reactjs tinymce-4

我正在使用Reactjs和tinyMCE 4.1.10 html编辑器(连同代码插件)和bootsrap css + js元素。在编辑器出现一些怪癖后,一个相当有效的设置已被删除(manual destruction if the parent element unmounts

现在的问题是:代码插件的textarea输入没有收到任何焦点,点击或键事件,基本上是不可理解的。通过javascript设置值工作正常,但它不能作为普通的html输入。

按以下方式打开:

  1. 数据表作为反应组件
  2. 打开bootsrap模式作为反应组件
  3. 在模态
  4. 内的textareas上初始化tinymce
  5. 加载代码插件(它本身不再接受任何类型的输入)
  6. 我的编辑器启动如下:

    componentDidMount: function(){
        tinymce.init({
              selector: '.widget-tinymce'
            , height : 200
            , resize : true
            , plugins : 'code'
        })
    }
    

    我的猜测是,react.js在某种程度上阻止或阻止了这里的事件。如果我删除react modal DOM,它就可以正常工作。

    是否有人有想法,是什么导致了这个或如何进一步简单地调试它?

    很多!

2 个答案:

答案 0 :(得分:0)

你的html / jsx在你的组件中是什么样的?

我的猜测是,反应可能会将您的输入视为Controlled Component

如果您在渲染时设置s属性,则需要等待,并通过道具或状态进行操作。

答案 1 :(得分:0)

好吧,事实证明,引导模态javascript在某种程度上是劫持这个。为了节省一些时间,我决定不再深入研究这个,而只是在jsx中创建我自己的模态js。

显然还有React Bootstrap,但是为了获得额外的依赖性,它会为我提供很多测试版。

最终代码看起来像这样,以防它在某些时候变得方便:

Modal = React.createClass({

          show: function() {
            appBody.addClass('modal-open');
            $(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);  
          }

        , hide: function(e){
            if (e) e.stopPropagation();

            if (!e || $(e.target).data('close') == true) {
                appBody.removeClass('modal-open');
                $(this.getDOMNode()).animate({opacity: 0}, 300, function(){
                    $(this).hide();
                });
            }
          }

        , showLoading: function(){
            this.refs.loader.show();    
          }

        , hideLoading: function(){
            this.refs.loader.hide();    
          }

        , render: function() {

            return (
                <div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
                  <div className="modal-dialog">
                    <div className="modal-content">
                      <div className="modal-header">
                        <button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
                      </div>
                      <div className="modal-body" id="overlay-body">
                        {this.props.children}
                        <AjaxLoader ref="loader"/>
                      </div>
                    </div>
                  </div>
                </div>
            );
        }
  })

祝福

安德烈亚斯