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.
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.