We are from Oracle and we have purchased CKEditor.
We are uptaking 3.6.6.1 version for our project from 3.3.2 version of CKEditor where we have 3 dependant dropdowns.
The below functionality was working properly with 3.3.2 version of the CKEditor but the same code
is not working with 3.6.6.1 version of the CKEditor.
The functionality is,
On the selection of the first drop down, the second dependant dropdown has to be loaded with the set
of values and which is working properly.
But on making the selection in the second dropdown, the third dependant dropdown is not rendering
and remains closed and we are not able see the values as well as select the values from the dropdown.
We are seeing this issue in 3.6.6.1 version and not in 3.3.2 version of the CKEditor.
For Ex:
First dropdown is Country and the second dropdown is States.
When I select the Country dropdown as 'USA', it is loading the states corresponding to USA but when I select
the state, the City dropdown is not getting rendered and remains closed.
By adding alerts, I could figure out that the values got added to the third dropdown Cities but the dropdown
is not getting rendered on clicking.
Sample Code used is added below,
/**
* Find the specific UI item by row and column index.
* @param {Object} editor
* @param {Object} rowIndex
* @param {Object} colIndex
*/
function getToolbarUIItem( editor, rowIndex, colIndex){
return editor.toolbox.toolbars[ rowIndex -1].items[ colIndex-1];
}
CKEDITOR.plugins.add( 'CountryOperations',
{
requires : [ 'richcombo' ],
init : function( editor )
{
editor.selectedChildValue = "";
editor.selectedChildChildValue = "";
editor.selectedUrlAssoc = "";
var config = editor.config;
var pluginName = 'DropdownCommand';
var command = editor.addCommand( pluginName, CKEDITOR.plugins.DropdownCommand );
// Register toolbar buttons.
config.toolbar_Full.push( [ 'LinkedComboParent1', 'LinkedComboChild1', 'LinkedComboChildChild1', 'InsertBtn' ] );
// First Dropdown - Countries - Driver Combo.
editor.ui.addRichCombo( 'LinkedComboParent1',
{
label : elementStr,
title : '',
className : 'cke_fontSize',
panel :
{
css : editor.skin.editor.css.concat( config.contentsCss ),
multiSelect : false,
attributes : { 'aria-label' : '' }
},
init : function()
{
countries = String(parent.initialList).split(",");
countryCodes = String(parent.initialListCodes).split(",");
for ( var i = 0 ; i < countries.length ; i++ )
{
var name = countries[ i ];
var code = countryCodes[ i ];
this.add( code, name, name );
}
},
onClick : function( value )
{
parent.setSelItem(value);
var linkedCombo = getToolbarUIItem( editor, 9, 2 ).combo;
var attributeCombo = getToolbarUIItem( editor, 9, 3 ).combo;
if ( linkedCombo && attributeCombo )
{
// In case the linked combo is still hidden.
linkedCombo.createPanel( editor );
linkedCombo.clear();
attributeCombo.createPanel( editor );
attributeCombo.clear();
var states = StatesList.split(":");
if(value == 'USA'){
for ( var i = 0 ; i < states.length ; i++ )
{
var state = states[ i ];
linkedCombo.add( state, state, state );
}
}
linkedCombo._.committed = 0;
linkedCombo.commit();
attributeCombo._.committed = 0;
attributeCombo.commit();
}
},
onRender : function() { /*...*/ }
});
// Second Dropdown - States
editor.ui.addRichCombo( 'LinkedComboChild1',
{
label : elementValueStr,
title : '',
className : 'cke_fontSize',
panel :
{
css : editor.skin.editor.css.concat( config.contentsCss ),
multiSelect : false,
attributes : { 'aria-label' : '' }
},
init : function() { /*...*/ },
onClick : function( value ) {
if (parent.selIndex == 1) {
var attributeCombo = getToolbarUIItem( editor, 9, 3 ).combo;
if ( attributeCombo )
{
// In case the linked combo is still hidden.
attributeCombo.createPanel( editor );
attributeCombo.clear();
// Fetch and add cities to the list dynamically
parent.commonInterfaceScript('StateId#' + value, {editorId : editor.name});
}
attributeCombo._.committed = 0;
attributeCombo.commit();
}
else if (parent.selIndex == 2) {
for ( var i = 0 ; i < Cities.length ; i++ )
{
if(value == Cities[i])
break;
}
editor.selectedChildValue = '<a href=\"' + CityList[i] + '\">' + value + '</a>';
}
},
onRender : function() { /*...*/ }
});
// Third Dropdown - Cities
editor.ui.addRichCombo( 'LinkedComboChildChild1',
{
label : parent.mergeFieldsStr,
title : '',
className : 'cke_fontSize',
panel :
{
css : editor.skin.editor.css.concat( config.contentsCss ),
multiSelect : false,
attributes : { 'aria-label' : '' }
},
init : function() { /*...*/ },
onClick : function( value ) {
if (parent.selIndex == 1) {
alert("called from LinkedComboChildChild1");
var content = editor.getData();
editor.selectedChildChildValue = '${' + value + '}';
}
},
onRender : function() { /*...*/ }
});
// Register the toolbar button.
editor.ui.addButton( 'InsertBtn',
{
label : insertStr,
command : pluginName
});
},
afterInit : function()
{
CKEDITOR.ui.listBlock.prototype.clear = function()
{
this._.pendingHtml = [];
this._.items = {};
this._.groups = {};
this.element.setHtml( '' );
};
CKEDITOR.ui.richCombo.prototype.clear = function()
{
this.setValue( '');
this._.list.clear();
};
}
});
CKEDITOR.plugins.DropdownCommand =
{
exec : function( editor )
{
if (parent.selIndex == 1) {
...
...
}
else if (parent.selIndex == 2 ) {
...
...
}
}
};