Tinymce 编辑器代码插件在 React 中不起作用 Model

Question

I'm using Windmill React UI for Popup.
Inside popup I'm using Tinymce editor for storing email templates.
Editor is showing but in source code popup I'm not able to edit.

Please help me to fix this issue. Thanks in advance.

<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

This is most likely due to your "modal" dialog not relinquishing focus. Since there is no such thing as a modal in plain HTML your choice of modal is likely a combination of HTML and Javascript (eg Windmill) and it is not wanting to let go of focus. You will need to figure out how to tell your modal code to allow something else to get control.

The TinyMCE documentation has an example of how to do this for Bootstrap:

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

As you are using a different technology you will need to determine how to do something similar.