I'm using alloyeditor and I have conveyed the following toolbar:
toolbars: {
add: {
buttons: ['image', 'hline', 'table', 'camera'],
},
styles: {
selections: [{
name: 'text',
buttons: [
'h1',
'h2',
'bold',
'italic',
'underline',
'ul',
'ol',
'quote',
'link',
'removeFormat'
],
test: AlloyEditor.SelectionTest.text
},
{
name: 'image',
buttons: ['imageLeft', 'imageCenter', 'imageRight'],
test: AlloyEditor.SelectionTest.image
}],
}
}
My image button is adding images normally, however I want to add an image button that will only change a class to the css. In the case I configured to add image the following function:
alloyEditorGet.on('imageAdd', function(event) {
var file = Image.base64ToFile($(event.data.el.$).attr('src')),
imageTag = $(event.data.el.$);
Image.uploadImage(file).then(function(response) {
var imageLink = '.image({uidImage: "' + response.uid + '"';
imageLink += '})';
imageTag.attr({
'data-uid': response.uid,
'ui-sref': imageLink,
'width': imageTag.width(),
'height': imageTag.height(),
});
imageTag.wrap('<span>');
imageTag.after($('<span>').attr({
'data-uid': response.uid,
'class': 'image-caption'
}));
}, function() {
imageTag.remove();
});
});
This function will make all the changes I need, but in this new button I will add the class in the image: class:'expanded'
. I know where I should change to add the class. But what I want to know is how will I add a new button with the same default button properties image
and add some details as I did above?