Question

我正在尝试在froala编辑器中插入链接。但是，当我单击链接（屏幕快照中的froala）时，我没有得到像open / edit / insert / unlink这样的子菜单选项。我的froala编辑器在div中以模态对话框（bootstrap类）的形式打开。我在文件中包含了link.min.js插件

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

<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弹出窗口上，但不会显示 working image not working image

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>

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

1 个答案: