When a user clicks or selects an element, I want to display its attributes in a dialog box. Everything works fine initially, but when I close the dialog and open it again for another element, it still shows the previous attributes list. The issue lies in the fact that the attribute list is only updated on page reload.I need the list to be updated every time the dialog opens for a new element. It should reflect the attributes of the current element being selected.
// Dialog definition.
CKEDITOR.dialog.add( 'abbrDialog', function( editor ) {
let selection = editor.getSelection();
let element = selection.getStartElement();
let elAttributes = Object.keys(element.getAttributes());
let listAttrElements = getListOfItems(elAttributes);
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Attributes',
minWidth: 400,
minHeight: 200,
// Dialog content.
contents: [
{
id: 'basic',
elements: listAttrElements
}
],
onShow: function() {
console.log('here in on show');
},
onOk: function() {
CKEDITOR.dialog.getCurrent().reset();
},
onLoad: () => {
console.log('loaded')
}
};
});
function getListOfItems (attrObj) {
return attrObj.map ((el, index) => { return {
type: 'checkbox',
id: index,
label: el,
setup: function( element ) {
console.log('new setup required')
this.setValue( element.getText() );
},
commit: function( element ) {
element.setText( this.getValue() );
}
}});
}
Your assistance is greatly appreciated!
https://github.com/ckeditor/ckeditor4/issues/4906#issuecomment-927666316