CKEditor 4 在 Material UI 对话框中使用时出现问题
CKEditor 4 having problem when used in Material UI dialog
我正在做一个 React 项目,我在 Material UI 对话框中使用了 CKEditor 4。当我尝试使用 Math 等高级选项时。我无法在输入文本区域字段中输入任何内容。我已经搜索了解决方案,但所有解决方案都与 Bootstrap 模态有关。如果有人在使用 Material UI 对话框时遇到同样的问题。如果能把解决方法分享出来就帮大忙了
Bootstrap 模态的解决方案:
Material UI 对话框:https://material-ui.com/demos/dialogs/
附上截图供参考。
重现问题的步骤。 - 打开 https://codesandbox.io/s/vv50789765 查看代码示例
第一步:打开CKEditor,点击截图中突出显示的图片图标。
第 2 步:单击图片图标后,将打开另一个弹出窗口,其中包含一些输入表单元素。 None 的输入表单元素是可编辑的,我无法在表单元素中输入任何内容。请参考屏幕截图。
其中一个 Modal props 是 disableEnforceFocus
:
If true
, the modal will not prevent focus from leaving the modal while open.
Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
如果没有此 属性 设置,每次您尝试将焦点更改为 ckeditor 图像对话框中的输入字段之一时,Material-UI 对话框(使用模态)会自动将焦点带回本身。
这是沙盒的一个版本,其中指定了 disableEnforceFocus
,然后可以使用:
我正在做一个 React 项目,我在 Material UI 对话框中使用了 CKEditor 4。当我尝试使用 Math 等高级选项时。我无法在输入文本区域字段中输入任何内容。我已经搜索了解决方案,但所有解决方案都与 Bootstrap 模态有关。如果有人在使用 Material UI 对话框时遇到同样的问题。如果能把解决方法分享出来就帮大忙了
Bootstrap 模态的解决方案:
Material UI 对话框:https://material-ui.com/demos/dialogs/
附上截图供参考。
重现问题的步骤。 - 打开 https://codesandbox.io/s/vv50789765 查看代码示例
第一步:打开CKEditor,点击截图中突出显示的图片图标。
第 2 步:单击图片图标后,将打开另一个弹出窗口,其中包含一些输入表单元素。 None 的输入表单元素是可编辑的,我无法在表单元素中输入任何内容。请参考屏幕截图。
其中一个 Modal props 是 disableEnforceFocus
:
If
true
, the modal will not prevent focus from leaving the modal while open.Generally this should never be set to true as it makes the modal less accessible to assistive technologies, like screen readers.
如果没有此 属性 设置,每次您尝试将焦点更改为 ckeditor 图像对话框中的输入字段之一时,Material-UI 对话框(使用模态)会自动将焦点带回本身。
这是沙盒的一个版本,其中指定了 disableEnforceFocus
,然后可以使用: