Froala 编辑器未显示链接的编辑/插入/取消链接选项

Question

我正在尝试在 froala 编辑器中插入 link。但是当我点击 link （如屏幕截图所示的 froala）时，我没有得到像 open /edit/insert/unlink 这样的子菜单选项。我的 froala 编辑器在 div 中作为模态对话框 (bootstrap class) 打开。我在我的文件 link.min.js 中包含了插件

我怀疑我们是否可以在父弹出窗口中打开弹出窗口（froala 的子菜单选项）window（div 弹出窗口）？

<div class="modal" id="modalDivAddEvent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
<script> 
$(document).ready(function () {
var contents = document.getElementById('form-edit:code').value;                                                         
$('#froala').froalaEditor({
placeholderText: 'Start creating your page',
quickInsertTags: [],
height: 300,
heightMin: null,
heightMax: null,                                                                    
contenteditable :true,                                                                    
linkAlwaysBlank : true
});                                                           
$('#froala').froalaEditor('html.set', contents);

});
</script>

我希望子菜单显示在 div 弹出窗口中，但它不是

工作图像
图片无效

Answer 1

如果您在 boostrap/modal 弹出窗口中加载 froala，则 froala 创建的对话框弹出窗口可能会在 boostrap/modal 弹出窗口后面加载。你必须使用 zIndex 属性 - https://www.froala.com/wysiwyg-editor/docs/options#zIndex

<script> 
$(document).ready(function () {
var contents = document.getElementById('form-edit:code').value;                                                         
$('#froala').froalaEditor({
placeholderText: 'Start creating your page',
quickInsertTags: [],
height: 300,
heightMin: null,
heightMax: null,                                                                    
contenteditable :true,                                                                    
linkAlwaysBlank : true,
zIndex:2501
});                                                           
$('#froala').froalaEditor('html.set', contents);

});
</script>

Answer 2

您必须从模态中删除 tabindex="-1" 并需要将 zIndex 属性添加到 froala-editor

var froalaSettings = {
  zIndex: 2000,
}

Froala 编辑器未显示链接的编辑/插入/取消链接选项

Froala editor is not showing edit /insert/ unlink option for links

html

javascript

froala