I have added a custom field to the Image dialog like this:
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var infoTab = dialogDefinition.getContents('info');
infoTab.add({
id: 'imageCopyright',
type: 'text',
label: 'Image Copyright',
});
}
});
All I want to do is add the value of the imageCopyright
field and add it to my DOM just after the <img>
itself and have it wrapped in <p>
tags with a class of "image-copyright"
added to that <p>
tag.
Here is an example of what I mean:
<img src="/path/to/image" />
<p class="image-copyright">Value from imageCopyright field here</p>
I understand it has something to do with the onOk
function but I don't want to go into the Image.js file and mess it up because I don't know what I'm doing.
Any pointers or links to examples or some code would be greatly appreciated.