twitter-bootstraptinymce

tinymce code editor over bootstrap modal is not editable


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 class="modal fade" id="_bodyModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Why I cannot edit html?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <textarea data*id="0" id="bodyText" ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zatvori</button>
        <button type="button" class="btn btn-primary" onclick="acceptChanges()">Primeni izmene</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-sm btn-info" 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();
  }

Solution

  • 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/