Reactjs与TinyMCE编辑器代码插件一起使用

I'm using Reactjs together with the tinyMCE 4.1.10 html editor (together with the code plugin) and bootsrap css + js elements. A fairly working setup after a few quirks with the editor have been removed (manual destruction if the parent element unmounts)

我正在使用Reactjs和tinyMCE 4.1.10 html编辑器(连同代码插件)和bootsrap css + js元素。在删除编辑器的几个怪癖后,一个相当有效的设置已被删除(如果父元素卸载则手动销毁)

Now the question: The textarea input of the code plugin does not receive any focus, click or key events and is basically dissabled. Setting the value via javascript works just fine, but it does not function as a normal html input.

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

It is opened as the following:

它打开如下:

datatable as react components

数据表作为反应组件

opens bootsrap modal as react component

打开bootsrap模态作为反应组件

initializes tinymce on textareas inside of the modal

在模态内部的textareas上初始化tinymce

loads the code plugin (which itself then is not accepting any kind of input anymore)

加载代码插件(它本身就不再接受任何类型的输入)

My initilization of the editor looks like this:

我对编辑器的启动看起来像这样:

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

My guess would be, that react.js is somehow blocking or intersepting the events here. If I remove the react modal DOM, it is just working fine.

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

Does anybody has an idea, what is causing this or how to simply debug it further?

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

Thx a lot!

多谢!

2 个解决方案

#1

What does your html/jsx look like in your component?

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

My guess is that react might be treating your input as a Controlled Component

我的猜测是反应可能会将您的输入视为受控组件

If you're setting the value attribute when you render, you'll want to wait, and do that via props or state instead.

如果您在渲染时设置了value属性,则需要等待,并通过props或state来执行此操作。

#2

Alright, so it turned out that bootstrap modals javascript is somehow highjacking this. In favor of saving some time I decided not to dig realy into this but just to create my own modal js inside of the jsx.

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

Aparently there is also React Bootstrap, but it looks at the moment to much beta for me in order to take this additional dependency in.

显然还有React Bootstrap,但是为了获得这种额外的依赖性,它为我看了很多测试版的时刻。

The final code looks like this, in case it becomes handy at some point:

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

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

Best wishes

Andreas

#1