I am using froala editor to edit documents in my project.now,the problem is froala toolbar keep on moving.I dont know why its happening.
first of all, i am creating new div by clicking add page button and this button have onclick event where it creates div with froala editor dynamically,If the user enter 2 pages it will create two divs with two toolbar on top of div.when i scroll the page, the toolbar keep on moving its position.please ,kindly help me with this problem.
here my code:
<button id="add_page" onclick="page()">+ Add Page</button>
var id=0;
var div_id=0;
function page(){
var pages= document.getElementById("pages").value;
if(total_pages == ""){
alert("Please enter number of pages");
}
else{
for(var start=1;start<=total_pages;start++){
var divRefer = document.querySelector('div.temp');
var divToCreate = document.createElement('div');
divToCreate.style.width="595pt";
divToCreate.style.height="842pt";
divToCreate.style.pageBreakAfter="always";
div_id++;
divToCreate.setAttribute("id","display_next"+div_id);
var div_deleteId="display_next"+div_id;
divToCreate.setAttribute("Contenteditable","true");
//divToCreate.innerHTML="Insert Your Text Here";
delete_btn.setAttribute("onclick","delete_div("+div_deleteId+");");
var textarea= document.createElement('textarea');
textarea.setAttribute("Contenteditable","true");
id++;
var text_edit="text_edit"+id;
textarea.setAttribute("id",text_edit);
//divToCreate.setAttribute("class","ck-editor__editable");
divReference.parentNode.appendChild(divToCreate);
divToCreate.appendChild(textarea);
divToCreate.appendChild(delete_btn);
var editor = new FroalaEditor("textarea#"+text_edit, {
height: '542',
});
}
}
}
function CustomizationPlugin( editor ) {
}
NOTE: i attached screenshot,kindly check it.
this is how its moving from div.actually toolbar is created dynamically and appended to div.