In case of Multiple divs Alloy Editor doesn't focus on currently selected div in case of Dropdown #515
Comments
|
Hey @qasid, Let me answer to these questions one by one:
Yes, it does.
About these two questions, please see the code below: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Advanced Editing Demo</title>
<link href="alloy-editor/assets/alloy-editor-ocean.css" rel="stylesheet">
<script src="alloy-editor/alloy-editor-all.js"></script>
</head>
<body>
<div id="container"></div>
<button id="btnAddDiv" type="button">Add Address</button>
<script type="text/javascript">
AlloyEditor.Selections[3].buttons = ['Font', 'FontSize'].concat(AlloyEditor.Selections[3].buttons);
var alloyEditorInstances = Object.create(null);
function creteAlloyEditorInstance(element) {
var instance = AlloyEditor.editable(element.id, {
extraPlugins: AlloyEditor.Core.ATTRS.extraPlugins.value + ',ae_richcombobridge,font'
});
alloyEditorInstances[element.id] = instance;
}
var count = 1;
document.getElementById('btnAddDiv').addEventListener('click', function () {
var element = document.createElement('div');
element.id = 'id' + count++;
element.innerHTML = count + '). Test Data ';
document.getElementById('container').appendChild(element);
element.addEventListener('click', function() {
var existingInstance = alloyEditorInstances[element.id];
if (existingInstance) {
existingInstance.destroy();
alloyEditorInstances[element.id] = null;
} else {
creteAlloyEditorInstance(element);
}
});
});
</script>
</body>
</html>This should do what you want - the instances are created and deleted on the fly. |
|
Now, about the issue with the duplicated status of Fonts and FontSize buttons: and download the FontSize plugin, as it is shown in our guides. Here is the issue:
Thanks, |
|
Looks like we may be intializing the plugins with the wrong editor instance... I'll take a look |
|
From what I'm seeing, we assumed the CKEditor plugins wouldn't have state, but unfortunately, they do :( The methods we invoke: |
|
Hey @qasid I successfully identified the issue, but haven't had time to work on a fix yet I think we should be able to start working on this some time next week. |
|
Cool, glad it's working for you now, @qasid! Thanks for reporting and helping us improve! |
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:
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,
The text was updated successfully, but these errors were encountered: