ReactJ与Tinymce编辑器代码插件一起

Question

我正在将ReactJ与Tinymce 4.1.10 HTML编辑器一起使用（以及代码插件）和BootSrap CSS JS元素。删除了与编辑器的几个怪癖之后的相当工作的设置

现在的问题：代码插件的TextArea输入未接收任何焦点，单击或关键事件，并且基本上是解剖的。通过JavaScript设置该值的工作正常，但它不能用作普通HTML输入。

它的打开如下：

1. DATATABLE作为React组件
2. 打开bootsrap模式为React组件
3. 在模态内部的textareas上初始化Tinymce
4. 加载代码插件（然后本身不再接受任何类型的输入）

我对编辑器的起始作品看起来像这样：

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

我的猜测是，React.js在某种程度上阻止或在此处进行交织。如果我删除React模态DOM，它的工作正常。

有人有一个想法吗？是什么原因导致了这一点或如何简单地调试它？

很多！

Answer 1

如果使用材料UI。通过添加prop disauseenforcefocus = {true}和DisableAutoFocus = {true}

Answer 2

您的组件中的HTML/JSX是什么样的？

我的猜测是，React可能将您的输入视为受控组件

如果您在渲染时设置了value属性，则需要等待，然后通过道具或状态进行此操作。

Answer 3

好的，所以事实证明，Bootstrap模式JavaScript在某种程度上是在劫持此问题。为了节省一些时间，我决定不挖掘这一点，而只是为了在JSX内创建自己的模态JS。

显然也有反应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>
            );
        }
  })

最好的祝福

Andreas

Answer 4

材料UI：通过添加prop disableenforcefocus = {true} 和 disabableAutoFocus = {true}