CKEditor 4在“材质UI”对话框中使用时出现问题 [英] CKEditor 4 having problem when used in Material UI dialog

问题描述

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

Bootstrap Modal解决方案：

重现问题的步骤。-打开

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

解决方案

模态道具是 disableEnforceFocus ：

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

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

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

以下是沙盒的一个版本，其中指定了 disableEnforceFocus 然后可以起作用：

<一小时f = https://codesandbox.io/s/80pu0 rel = noreferrer> https://codesandbox.io/s/80pu0

I am working on a React project where I have used CKEditor 4 on Material UI dialog. When I am trying to use advance options like Math. I am not able to type in, anything on input, textarea fields. I have searched for solutions but all the solutions are with respect to Bootstrap Modal. If anyone has faced the same issue using the Material UI dialog. It will be a great help if you can share the solution.

Solution for Bootstrap Modal: http://stackoverflow.com/a/18554395/778587

Material UI dialog: https://material-ui.com/demos/dialogs/

Attaching the Screenshot for the reference.

Steps to reproduce the issue. - Open https://codesandbox.io/s/vv50789765 for code example

Step 1: Open CKEditor and click on the picture icon highlighted in the screenshot.

Step 2: Once you click on the picture icon another popover will be opened with some input form elements. None of the input form elements is editable, I am not able to type anything in the form elements. Please refer the screenshot.

解决方案

One of the Modal props is 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.

Without this property set, every time you try to change focus to one of the input fields in the ckeditor image dialog, the Material-UI Dialog (which uses Modal) automatically brings focus back to itself.

Here's a version of the sandbox with disableEnforceFocus specified which then works:

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

这篇关于CKEditor 4在“材质UI”对话框中使用时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！