HI,
I am developing my own plugin to allow a custom <input> tag to be inserted into a form. When i return the code to the WYSIWYG it appears fine, however if the source is viewed it takes the first input field data ('Basic Settings') from the dialogue box and places it after the close of the in put element
the pluggin code
When it returns the input into the editor it only shows the input box as desired, however if i edit source i get the following code change
the end "Date of Birth</p>" is not suppose to happen, anyone have any tips or tricks to stop this?
I am developing my own plugin to allow a custom <input> tag to be inserted into a form. When i return the code to the WYSIWYG it appears fine, however if the source is viewed it takes the first input field data ('Basic Settings') from the dialogue box and places it after the close of the in put element
the pluggin code
/* CUSTOM CALENDAR FUNCTION Created DEC 2011 */ CKEDITOR.plugins.add( 'calendar', { init: function( editor ) { editor.addCommand( 'calDialog',new CKEDITOR.dialogCommand( 'calDialog' ) ); editor.ui.addButton( 'calendar', { label: 'Calendar', command: 'calDialog', icon: this.path + 'images/icon.gif' } ); CKEDITOR.dialog.add( 'calDialog', function ( editor ) { return { title : 'Calendar Properties', minWidth : 200, minHeight : 100, contents : [ { id : 'tab1', label : 'Basic Settings', elements : [ { type : 'select', id : 'Name', label : 'Name', items : [ [ 'Anniversary' ], [ 'Date of Birth' ] ], 'default' : 'Anniversary' }, { type : 'select', id : 'Mandatory', label : 'Mandatory', items : [ [ 'Yes' ], [ 'No' ] ], 'default' : 'No' } ] } ], onOk : function() { var dialog = this; var cal = editor.document.createElement( 'input' ); cal.setAttribute( 'type', 'text' ); cal.setAttribute( 'name', dialog.getValueOf( 'tab1', 'Name' )); cal.setAttribute( 'id', dialog.getValueOf( 'tab1', 'Name' )); cal.setAttribute( 'onclick', 'ShowCal(event,this)' ); cal.setAttribute( 'value', ' ' ); cal.setAttribute( 'size', '10' ); cal.setAttribute( 'maxlength', '10' ); if (dialog.getValueOf( 'tab1', 'Name' ) == "Anniversary") { var caltype = "anniversary"; } else { var caltype = "date of birth"; } if (dialog.getValueOf( 'tab1', 'Mandatory' ) == "Yes") { var man = "mandatory"; } else { var man = "notmandatory"; } cal.setAttribute( 'class', 'FIELD:textfield|'+ caltype +'|'+ man ); cal.setText( dialog.getValueOf( 'tab1', 'Name' ) ); editor.insertElement( cal ); } }; } ); } } );
When it returns the input into the editor it only shows the input box as desired, however if i edit source i get the following code change
<p><input class="FIELD:textfield|date of birth|notmandatory" id="Date of Birth" maxlength="10" name="Date of Birth" onclick="ShowCal(event,this)" size="10" type="text" value=" " />Date of Birth</p>
the end "Date of Birth</p>" is not suppose to happen, anyone have any tips or tricks to stop this?
Re: view source edits <input> tag
Input elements are not supposed to have children.
Re: view source edits <input> tag
TYVM