I have no idea where to look to figure this out. I'm trying to change a select elements label that's automatically generated with ckeditor. I've looked through the documentation, but I cannot find a solution to modifying the label. Instead of saying align, I need it to say something like, "FOO Align" I'm at a loss here. I've got the parent divs id. I've tried doing the following
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
document.getElementById('cke_79_label').innerHTML = 'FOO Alignment';
});
As Well as,
function alignmentLabelReplace() {
document.getElementById('cke_79_label').innerHTML
= 'FOO Alignment';
}
So to kind of condense the overall goal is to change the label of a ckeditor select box. The ckeditor select box is within the table element, that pops up in a modal. How do I manipulate this?
EDIT: I'm trying to take this stackoverflow article to fix to my purposes.
I've wrote this up, but. Still no luck.
CKEDITOR.dialog.add( 'dialogDefinition', function ( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table' || dialogName == 'tableProperties'){
return {
contents: [
{
id: "cmbAlign",
type: "select",
label: 'Table Alignment',
}]
};
}
});
So. I got ahold of a senior dev with the company I work for and we found a solution. I've tested it on my environment, it works for me. I've tried to write up some explanatory text as well for future individuals. Please forgive me if my words or syntax is incorrect.
This bit of documentation may help as well.
(function () {
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'table' || dialogName == 'tableProperties'){
//Get info tab
console.log(dialogDefinition);
// So through this we get the contents of the table ui.
var infoTab = dialogDefinition.getContents( 'info' );
console.log(infoTab);
//no that we've got the table dialed down a bit more
// we're able to see the various elements.
//now, I've made a variable selectLabel, where I take infoTab apply .get
// with the id 'cmbAlign'
var selectLabel = infoTab.get('cmbAlign');
//then as we can see here, i take the variable selectLabel
//target the array element in square brackets, ['label']
// set the new varaiable, and it works!
selectLabel['label'] = 'Table Alignment';
}
});
})();