In case of Multiple divs Alloy Editor doesn't focus on currently selected div in case of Dropdown #515
Description
I have a sample code that creates a new div on click and appends or should I say bind it with an Alloyeditor instance. Problem I am having is that instance created this way works fine for first selected and created div, but when second div is selected "bold" "underline" etc buttons work properly. except in case of Dropdown list item selection, it doesn't work properly, i.e on click of dropdown list item in second div, first div remains selected and selection is applied on selected text but in previous instance. As more instances are created bold and Underline etc. buttons also don't work properly.
Here is my code:
//HTML
<div id="container">
// divs added here
</div>
<button id="btnAddDiv" type="button">Add Address</button>
//Script
AlloyEditor.Selections[3].buttons = ['FontSize'].concat(AlloyEditor.Selections[3].buttons.concat([ 'Font' ]));
var editor=null;
var element=null;
var count= 1;
// on click new div is created and added to main div container.
$("btnAddAddress").addEventListener("click", function () {
element = document.createElement("div");
var prevId=element.id || null;
element.id="NewDiv"+ count++;
element.setAttribute("contenteditable", "true");
element.innerHTML = count +"). Test Data ";
element.onclick = function () {
if (editor == null || prevId== null){
editor = AlloyEditor.editable(element.id,{
extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ae_richcombobridge,font',});
} else if( prevId == element.id) {
// also tried to destroy previous instance
editor.destroy();
element.id =null;
}
};
$("container").appendChild(element);
});
1). Does Alloyeditor provide multiple instance support.?
2). Is there a better way to do this to avoid creation of a new variable for each instance?
3). How to unbind an element ID from Alloyeditor?
Thanks,