tinymce - Reactjs 与 TinyMCE 编辑器代码插件一起

Question

我将Reactjs与tinyMCE 4.1.10 html编辑器(以及代码插件)和bootsrap css + js元素一起使用。删除编辑器的一些怪癖后，这是一个相当有效的设置( manual destruction if the parent element unmounts )

现在的问题是:代码插件的textarea输入没有收到任何焦点、点击或按键事件，基本上被禁用。通过 javascript 设置值效果很好，但它不能用作正常的 html 输入。

打开如下:

1. 数据表作为 react 组件
2. 将 Bootsrap 模式打开为 React 组件
3. 在模式内的文本区域上初始化tinymce
4. 加载代码插件(其本身不再接受任何类型的输入)

我的编辑器初始化如下所示:

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

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

有人知道是什么原因造成这个问题或者如何进一步调试它吗？

非常感谢!

Answer 1

如果您使用的是 Material UI。通过添加属性disableEnforceFocus={true}和可选的disableAutoFocus={true}来禁用Material UI对话框的强制焦点