Tinymce 编辑器代码插件在 React 模型中无法工作

Question

我正在使用 Windmill React UI 作为弹出窗口。
在弹出窗口中，我使用 Tinymce 编辑器来存储电子邮件模板。
编辑器正在显示，但在源代码弹出窗口中我无法编辑。

请帮我解决这个问题。 提前致谢。

<Editor
 onChange={(e) => { setEmailContent(e.target.getContent()) }}
 apiKey=''
 init={{
  height: 300,
  menubar: false,
  contextmenu: 'cut copy paste',
  branding: false,
  plugins: 'advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code fullscreen insertdatetime media table paste help wordcount',
  toolbar: 'code preview | undo redo | paste image media link | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat',
 }}
/>

Answer 1

这很可能是由于您的“模态”对话框没有放弃焦点。 由于纯 HTML 中不存在模态这样的东西，因此您选择的模态可能是 HTML 和 Javascript 的组合（例如 Windmill），并且它不想放弃焦点。 您需要弄清楚如何告诉模态代码以允许其他东西获得控制。

TinyMCE 文档有一个如何为 Bootstrap 执行此操作的示例：

https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog

当您使用不同的技术时，您将需要确定如何做类似的事情。

Answer 2

如果您遇到 TinyMCE-React 不允许在 MUI 对话框组件中编辑源代码的问题，则问题可能源于焦点传播和行为。要解决此问题，您可以修改 Dialog 组件中的单个 prop：

    <Dialog
      open={open}
      onClose={(_, reason) => {
        if (reason === 'backdropClick') return;
        handleClose();
      }}
      aria-labelledby="send-email-modal"
      disableEnforceFocus   //<<<< SET THIS TO TRUE
    >

通过将disableEnforceFocus设置为true，您应该能够毫无问题地编辑源代码。