Hello everybody, I hope you all are well...
When I select an image from image dialog, I fill all needed inputs whith necessary information using dialogDefinition ( Like Title, Alt, Link, Class, Widht, VSpace, HSpace...).
My problem is that I want also fill the relationship and title fields for the link href in Link dialog during using dialogDefinition of Image dialog.
Note: I am newbie on CKeditor, I was started working on it from 2 days ago and all result is from search over the net...
Here's my code:
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'image') {
var advancedTab = dialogDefinition.getContents( 'advanced' );
var classField = advancedTab.get( 'txtGenClass' );
classField['default'] = 'thumbnail col-xs-11 col-sm-4'; // Add class
var infoTab = dialogDefinition.getContents( 'info' );
var field = infoTab.get('txtAlt');
field['label'] = "Image caption"; // Change label text
field = infoTab.get('txtBorder');
field['label'] = "Border size"; // Change label text
field = infoTab.get('txtHSpace');
field['label'] = "Left/Right space"; // Change label text
field = infoTab.get('txtVSpace');
field['label'] = "Up/Down space"; // Change label text
var txtUrl = infoTab.get( 'txtUrl' ); // Now fill the url link into Link Tab
txtUrl['onMyEvent'] = txtUrl['onChange']; // Save current event onChange to use later because if not then the new onChange function will remove the old event and got an error into the functionality of the editor
txtUrl['onChange'] = function(evt){
var dialog = CKEDITOR.dialog.getCurrent();
$(this).trigger( 'onMyEvent' ); // Fire the saved event and continue fill data
dialog.getContentElement('Link', 'txtUrl').setValue(dialog.getContentElement('info', 'txtUrl').getValue());
dialog.getContentElement('info', 'txtHSpace').setValue(10);
dialog.getContentElement('info', 'txtVSpace').setValue(10);
dialog.getContentElement('info', 'cmbAlign').setValue('left');
dialog.getContentElement('info', 'txtWidth').setValue('');
dialog.getContentElement('info', 'txtHeight').setValue('');
var extEle = editor.name.substr(editor.name.length - 6); // Get last 6 characters for current editor
var titlePageSection = $("input[id$='" + extEle + "']"); // Use Jquery selector to find my title input ( Editor name = my_editor_dummy_extension and title input = my_title_dummy_extension
var titleValueEle = "";
if( titlePageSection.length > 0 ) {
titleValueEle = titlePageSection.val(); // If title id found then get the value
}
dialog.getContentElement('info', 'txtAlt').setValue(titleValueEle); // Fill value
dialog.getContentElement('advanced', 'txtGenLongDescr').setValue(titleValueEle);
dialog.getContentElement('advanced', 'txtGenTitle').setValue(titleValueEle);
// Code above running without any problem and do what I need
// Now make change on link dialog (title)
// Here is my problem
// I want also fill title of href and relationship field from Link Dialog
// But nothing work and did't find any way to how handle the link dialog and make my changes ( I create new dialog , create new definition, use open dialog link... )
// I want make this code below work ( 3 lines below )
// Note: dialogLinkObj is created using new dialog, new definition...)
//dialogLinkObj.getContentElement('advanced', 'advRel').setValue('Shadowbox[' + n + ']');
//dialogLinkObj.getContentElement('advanced', 'advTitle').setValue(titleValueEle);
//dialogLinkObj.getContentElement('target', 'linkTargetType').setValue('notSet');
// I want this because I want forced create a link around the image dynamic after any inserted image and I don't want use : instanceReady: function() { this.dataProcessor.htmlFilter.addRules or this.dataProcessor.dataFilter.addRules
}
}
if (dialogName == 'link') {
var targetTab = dialogDefinition.getContents( 'target' );
var target = targetTab.get( 'linkTargetType' );
target['default'] = '_blank';
}
});
Thank you for your help in advance... Waiting someone to answer my question.