Reactjs 连同 TinyMCE 编辑器代码插件

Question

我将 Reactjs 与 tinyMCE 4.1.10 html 编辑器（以及代码插件）和 bootsrap css + js 元素一起使用。在删除了编辑器的一些怪癖后，一个相当有效的设置 ()

现在的问题是：代码插件的textarea输入不接收任何焦点、点击或按键事件，基本上是禁用的。通过 javascript 设置值工作得很好，但它不能作为正常的 html 输入。

打开如下：

数据表作为反应组件
打开 bootsrap 模态作为反应组件
在模态框内的文本区域初始化 tinymce
加载代码插件（然后它本身不再接受任何类型的输入）

我对编辑器的初始化是这样的：

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

我的猜测是，react.js 以某种方式阻止或中断了这里的事件。如果我删除反应模式 DOM，它工作正常。

有没有人知道是什么原因造成的，或者如何简单地进一步调试它？

非常感谢！

Answer 1

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

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

如果您在渲染时设置 value 属性，您需要等待，并通过 props 或 state 来完成。

Answer 2

好吧，原来 bootstrap 模态 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>
            );
        }
  })

祝福

安德烈亚斯

Answer 3

如果您正在使用 Material UI。通过添加道具 disableEnforceFocus={true} 和可选的 disableAutoFocus={ true}

来禁用 Material UI 对话框的强制焦点

Answer 4

Material UI: 通过添加道具 disableEnforceFocus={true} 和 可选的 disableAutoFocus={ true 来禁用 Dialog 的强制聚焦}

Reactjs 连同 TinyMCE 编辑器代码插件

Reactjs together with TinyMCE editor code plugin

tinymce

tinymce-4

reactjs