Hey everyone! This is my first post here.
I'm extremely frustrated with the complexity of a seemingly simple task, and at least 50 Google searches later has proved absolutely no help whatsoever. I want to open the "image" dialog when another event in my application is triggered. Once opened, I want the URL, Alternative Text, etc. to be pre-populated with what I specify. I managed to simply hack the dialogDefinition, which seems super cheezy, but it works. The only problem is the dialogDefinition event only gets fired once, so what I want only works the first time it's used. Here's what I've got:
This feels extremely cheezy, and only works once anyways. What can I do to either fire the dialogDefinition event again, or properly fill out the data I need?
I'm extremely frustrated with the complexity of a seemingly simple task, and at least 50 Google searches later has proved absolutely no help whatsoever. I want to open the "image" dialog when another event in my application is triggered. Once opened, I want the URL, Alternative Text, etc. to be pre-populated with what I specify. I managed to simply hack the dialogDefinition, which seems super cheezy, but it works. The only problem is the dialogDefinition event only gets fired once, so what I want only works the first time it's used. Here's what I've got:
// When image is added
$('#page-image-manager').bind('add-file', function(e, storageId) {
// Compile image's relative URL
var url = '../image?src=' + storageId;
var markup = '<img $1 src="' + url + '" alt="Loading Image..." />';
// Open "Image Properties" dialog
CKEDITOR.instances['page-editor'].openDialog('image');
// Auto-fill URL and alternative text
CKEDITOR.on('dialogDefinition', function(ev) {
// Get dialog name and definition
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Modify "image" dialog definition
if ('image' === dialogName) {
// Get "Image Info" tab data, get image URL field
var infoTab = dialogDefinition.getContents('info');
var urlField = infoTab.get('txtUrl');
var altField = infoTab.get('txtAlt');
var preField = infoTab.get('htmlPreview');
// Auto-fill "Image Info" fields
urlField['default'] = url;
altField['default'] = 'Loading Image...';
preField['html'] = preField['html'].replace(/<img (id=".*?_previewImage") .*? \/>/gi, markup);
}
});
});This feels extremely cheezy, and only works once anyways. What can I do to either fire the dialogDefinition event again, or properly fill out the data I need?
Re: Populating fields in "image" dialog...
I realize I posted this thread in the wrong forum. My apologies everybody.
I found a temporary hack around my mess here by replacing the editor each time my add-file event is called. It's the only thing I could think of until someone provides me with a better solution.
CKEDITOR.instances['page-editor'].destroy(); CKEDITOR.replace('page-editor', { /* custom stuff */ });I would really appreciate it if someone could provide a cleaner alternative to this, as this can't possibly be the best way to pre-populate the Image Properties dialog window... Regardless, the boss isn't going to know the difference, but I hate having to hack my way through stuff like this, especially since the CKEditor has such an outstanding API.