Search code examples
javascripthtmlfroala

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

I am trying to insert a link in froala editor. but when i click on link (froala as shown in screenshot) , i do not get sub menu options like open /edit/insert/unlink . My froala editor opens in a div as a modal-dialog (bootstrap class) .I have included link.min.js plugin in my file

I am doubting if we can open a popup ( sub menu options from froala) inside a parent popup window ( div popup)?

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

I expect the sub menu to be shown on div popup but it is not

  1. working image working image
  2. not working image not working image
Solution

  • If you are loading froala inside a boostrap/modal popup then the dialog popups created by froala may loaded behind your boostrap/modal popup. You have to use zIndex property - 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>