Bootstrap

bsmodal#

Type: boolean

Default: false

Use when the editor lives inside a Bootstrap modal.

• Raises dropdown z-index to 1061 so panels stay above the modal stack
• Raises the context bar z-index to 1061 when the option is enabled

Also set data-bs-focus="false" on the modal element (Bootstrap 5.3+). Bootstrap’s focus trap otherwise blocks interaction with floating UI that lives outside the modal DOM (context bar, dropdown forms).

<div class="modal fade" id="editorModal" data-bs-focus="false" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-body" id="editorModalBody">
      <textarea id="entry"></textarea>
    </div>
  </div>
</div>

<script>
document.getElementById('editorModal').addEventListener('shown.bs.modal', () => {
  Redactor('#entry', {
    bsmodal: true,
    scrollTarget: '#editorModalBody'
  });
});
</script>

Initialize the editor in shown.bs.modal, not on page load.