tinymce code editor over bootstrap modal is not editable-CodePudding

I have a strange problem that the code editor is not editable when displayed over bootstrap modal. Here is a code example.

https://jsfiddle.net/sogrbilja/4s9cyetk/14/

<div  id="_bodyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div >
    <div >
      <div >
        <h5  id="staticBackdropLabel">Why I cannot edit html?</h5>
        <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div >
        <textarea data*id="0" id="bodyText" ></textarea>
      </div>
      <div >
        <button type="button"  data-bs-dismiss="modal">Zatvori</button>
        <button type="button"  onclick="acceptChanges()">Primeni izmene</button>
      </div>
    </div>
  </div>
</div>

<button  onclick="editEmailBody();">click here to invoke modal first</button>

    tinymce.init({
      selector: '#bodyText',
      height: 300,
      plugins: 'code',
      menubar: 'view'
    });
    
const _bodyModal = new bootstrap.Modal(document.getElementById('_bodyModal'), {
      keyboard: false
    });
    
    
function editEmailBody() {
    tinymce.get('bodyText').setContent("next click on View/Source code to invoke code editor and there try to change something, it is not possible, but i don know why");
    _bodyModal.show();
  }

CodePudding user response：

Bootstrap will block all attempts to move focus to another modal dialog. So as noted in the TinyMCE documentation you need to prevent Bootstrap trapping the focus within the Bootstrap dialog. As it appears you're using Bootstrap 5, that means you'd need to add the following:

// Prevent Bootstrap dialog from blocking focusin
document.addEventListener('focusin', (e) => {
  if (e.target.closest(".tox-tinymce-aux, .moxman-window, .tam-assetmanager-root") !== null) {
    e.stopImmediatePropagation();
  }
});

Here's an updated fiddle using the above and showing it working: https://jsfiddle.net/92dfrh5z/