I know this must be possible and I've had some luck, utilizing posts here and on Stacktrace, but I can't get the whole solution.
I want to add the "id" attribute to every input control (checkbox, radio, hiddenfield, etc.) and to every image, table, link element. Basically if it has a dialog, I want to add my own id to it so that when the html is created it has the id attribute.
I have a solution that is working for Image and Table. I define a field and I add it during dialog definition
That works great for Image and Table. But for all the input controls (button, checkbox, etc) and link. I get
element is undefined
[Break On This Error] element.setAttribute( 'id', uuid());
which is right, element is undefined. i just can't figure out how/what to get a hold of in order to output html elements.
I got the code that works for image from stacktrace and felt like a had a decent handle on its functionality, i tracked down the commit function in the dialog, etc. I realize it's a hack, using a hidden field, but there's an idea that users will be able to edit this value at some. Image and Table both had an id field on the advance tab, but so does Link so that's not it.
I need a solution that will work for all controls.
for some reason, i'd like to include the id during the UI create process, but i guess i could add them during in the dataprocessor component. any suggestions? i'm open to any all solutions.
thanks in advance.
robert
I want to add the "id" attribute to every input control (checkbox, radio, hiddenfield, etc.) and to every image, table, link element. Basically if it has a dialog, I want to add my own id to it so that when the html is created it has the id attribute.
I have a solution that is working for Image and Table. I define a field and I add it during dialog definition
var idField_config = {
type : 'text',
id : 'id',
hidden : true,
setup : function( type, element ) {
this.setValue( element.getAttribute( 'id' ) );
},
commit : function( type, element ) {
if ( !this.getValue())
element.setAttribute( 'id', uuid());
}
};
//find the dialogs I want and add the field
if ( dialogName == 'button' ) {
// we need to make some changes
var infoTab = dialogDefinition.getContents( 'info' );
//add the uuid functionality
infoTab.add( idField_config);
That works great for Image and Table. But for all the input controls (button, checkbox, etc) and link. I get
element is undefined
[Break On This Error] element.setAttribute( 'id', uuid());
which is right, element is undefined. i just can't figure out how/what to get a hold of in order to output html elements.
I got the code that works for image from stacktrace and felt like a had a decent handle on its functionality, i tracked down the commit function in the dialog, etc. I realize it's a hack, using a hidden field, but there's an idea that users will be able to edit this value at some. Image and Table both had an id field on the advance tab, but so does Link so that's not it.
I need a solution that will work for all controls.
for some reason, i'd like to include the id during the UI create process, but i guess i could add them during in the dataprocessor component. any suggestions? i'm open to any all solutions.
thanks in advance.
robert
Re: Adding additional html attributes to checkbox, image, et
I still have two (so far) problems.
1) Button changes it's uuid on every modification. It's appears the "parse" is ignoring existing value
2) Hidden Fields "toggles" on the value update. drops the uuid, then next update adds it back.
i'm still looking for the "right" solution.
// Used by Image and Table dialog modifications, to add an id to the html var idField_config = { type : 'text', id : 'id', hidden : true, setup : function( type, element ) { this.setValue( element.getAttribute( 'id' ) ); }, commit : function( type, element ) { if ( !this.getValue()) { element.setAttribute( 'id', uuid()); } } }; // Used by some form elements (checkbox, textfield, radio) dialog modifications var idFormField_config = { type : 'text', id : 'id', hidden : true, setup : function( element ) { this.setValue( element.getAttribute( 'id' ) ); }, commit : function( data ) { if ( !this.getValue()) { var element = data.element; element.setAttribute( 'id', uuid()); } } }; // Used by some form elements (textarea, hiddenfield) dialog modifications var idFormField_config2 = { type : 'text', id : 'id', hidden : true, setup : function( element ) { this.setValue( element.getAttribute( 'id' ) ); }, commit : function( element ) { if ( !this.getValue()) { element.setAttribute( 'id', uuid()); } } }; // Used by button element dialog modifications var idButtonField_config = { type : 'text', id : 'id', hidden : true, setup : function( element ) { this.setValue( element.attributes['id'] ); }, commit : function( element ) { if ( !this.getValue()) { element.attributes['id'] = uuid(); } } }; // Used by select element dialog modifications var idSelectField_config = { type : 'text', id : 'id', hidden : true, setup : function( name, element ) { if ( name == 'select' ) this.setValue( element.getAttribute( 'id' ) ); }, commit : function( element ) { if ( !this.getValue()) { element.setAttribute( 'id', uuid()); } } }; //make the dialogs less complex, easier to support CKEDITOR.on( 'dialogDefinition', function( ev ) { // Dialog name to find the one we want // Definition so we can customize it var dialogName = ev.data.name; var dialogDefinition = ev.data.definition; if ( dialogName == 'button' ) { // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); } else if ( dialogName == 'image' ) { // we don't need this functionality dialogDefinition.removeContents( 'advanced' ); //remove id if you enable this tab!!! // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); //add the uuid functionality infoTab.add( idField_config); } else if ( dialogName == 'table' || dialogName == 'tableProperties' ) { // we don't need this functionality dialogDefinition.removeContents( 'advanced' );//remove id if you enable this tab!!! // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); //add the uuid functionality infoTab.add(idField_config); } else if ( dialogName == 'link' ) { // we need to make some changes var advTab = dialogDefinition.getContents( 'advanced' ); var idField = advTab.get( 'advId' ); idField['hidden'] = true; //we don't want people messing with it dialogDefinition.onFocus = function() { //we need to set the id if it's not set var idField = this.getContentElement( 'advanced', 'advId' ); if (!idField.getValue()) { idField.setValue(uuid()); } }; } else if ( dialogName == 'createplaceholder' || dialogName == 'editplaceholder' ) { // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); //add the uuid functionality infoTab.add(idField_config); } //take care of some form elements else if ( dialogName == 'checkbox' || dialogName == 'radio' || dialogName == 'textfield') { // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); //add the uuid functionality infoTab.add(idFormField_config); } //take care of other form elements (submit/commit signature is different) else if ( dialogName == 'textarea' || dialogName == 'hiddenfield') { // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); //add the uuid functionality infoTab.add(idFormField_config2); } //take care of select form elements (submit/commit signature is different) else if ( dialogName == 'select') { // we need to make some changes var infoTab = dialogDefinition.getContents( 'info' ); //add the uuid functionality infoTab.add(idSelectField_config); } ...