我有一个奇怪的问题,代码编辑器是不可编辑的,当显示在引导模式。这里是一个代码示例。
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();
}
1条答案
按热度按时间7eumitmz1#
Bootstrap会阻止所有将焦点移动到另一个模式对话框的尝试。因此,正如TinyMCE文档中所指出的,您需要防止Bootstrap将焦点捕获在Bootstrap对话框中。由于您使用的是Bootstrap 5,这意味着您需要添加以下内容:
这里有一个更新的小提琴使用上述和显示它的工作:https://jsfiddle.net/92dfrh5z/