CODEWITHSUNDEEP
javascripthtmlfroala
saloni Agarwal
saloni Agarwal

Reputation: 43

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

Upvotes: 1

Views: 2479

Answers (2)

Nagesh Manukonda
Nagesh Manukonda

Reputation: 11

You have to remove tabindex="-1" from modal and need to add zIndex property to froala-editor

var froalaSettings = {
  zIndex: 2000,
}

Upvotes: 1

Ananth fmr
Ananth fmr

Reputation: 36

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>

Upvotes: 2

Related Questions