CODEWITHSUNDEEP
javascriptreactjstinymce
Karthick M
Karthick M

Reputation: 27

Tinymce Editor Code Plugin Not Working in React Model

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',
 }}
/>

Upvotes: 0

Views: 1464

Answers (3)

Harshit Gupta
Harshit Gupta

Reputation: 1

There might be a conflict with having multiple instances of TinyMCE initialized simultaneously in the same context.

You can use useState like this :- const [isEditorActive, setIsEditorActive] = useState(true); And if you are using Editor again in child component then you can toggle this state to make editor conditionally not render in parent

Upvotes: 0

Danilo-Guedes
Danilo-Guedes

Reputation: 141

If you're encountering issues with TinyMCE-React not allowing source code editing within an MUI Dialog component, the problem likely stems from focus propagation and behavior. To resolve this, you can modify a single prop in the Dialog component:

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

By setting disableEnforceFocus to true, you should be able to edit the source code without any problems.

Upvotes: 0

Michael Fromin
Michael Fromin

Reputation: 13746

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 (e.g. 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.

Upvotes: 1

Related Questions