CKEditor 4 在 Material UI 对话框中使用时出现问题答案

【问题标题】：CKEditor 4 having problem when used in Material UI dialogCKEditor 4 在 Material UI 对话框中使用时出现问题
【发布时间】：2019-05-08 17:50:19
【问题描述】：

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

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

材质 UI 对话框：https://material-ui.com/demos/dialogs/

附上截图以供参考。

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

第一步：打开CKEditor并点击截图中突出显示的图片图标。

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

【问题讨论】：

这里似乎工作正常：codesandbox.io/s/vv50789765
感谢 Ryan 分享codesandbox.io/s/vv50789765 问题仍然存在，我正在使用CodeSandbox 链接更新我的问题以及重现问题的步骤。

标签： javascript reactjs ckeditor material-ui

【解决方案1】：

Modal props 之一是disableEnforceFocus：

如果true，模态将不会阻止焦点在打开时离开模态。

一般情况下，这不应设置为 true，因为它会使辅助技术（如屏幕阅读器）更难以访问模式。

如果没有设置此属性，每次您尝试将焦点更改为 ckeditor 图像对话框中的输入字段之一时，Material-UI 对话框（使用 Modal）会自动将焦点返回到自身。

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

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

【讨论】：