CKEditor 4在“材质UI”对话框中使用时出现问题

Question

我正在一个React项目中，在Material UI对话框中使用CKEditor 4。当我尝试使用数学等高级选项时。我无法在输入，textarea字段中输入任何内容。我已经搜索了解决方案，但是所有解决方案都与Bootstrap Modal有关。如果有人使用“材质UI”对话框遇到了相同的问题。如果您可以共享解决方案，那将是很大的帮助。

Bootstrap模式解决方案：http://stackoverflow.com/a/18554395/778587

“材料界面”对话框：https://material-ui.com/demos/dialogs/

附加屏幕快照以供参考。

重现问题的步骤。-打开https://codesandbox.io/s/vv50789765以获取代码示例

步骤1：打开CKEditor，然后单击屏幕快照中突出显示的图片图标。

第2步：单击图片图标后，将打开另一个弹出框，其中包含一些输入表单元素。输入表单元素均不可编辑，我无法在表单元素中输入任何内容。请参考屏幕截图。

Answer 1

Modal props之一是disableEnforceFocus：

  

如果为true，则模式不会阻止焦点在打开时离开模式。

     

通常不应将其设置为true，因为这会使辅助技术（如屏幕阅读器）无法访问该模式。

在没有设置此属性的情况下，每次您尝试将焦点更改为ckeditor图像对话框中的输入字段之一时，“材质UI”对话框（使用Modal）都会自动将焦点移回其自身。

这是指定了disableEnforceFocus的沙盒的一个版本，然后可以使用：

https://codesandbox.io/s/80pu0