_source/plugins/forms/plugin.js

   1 /*
   2 Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
   3 For licensing, see LICENSE.html or http://ckeditor.com/license
   4 */
   5
   6 /**
   7  * @file Forms Plugin
   8  */
   9
  10 CKEDITOR.plugins.add( 'forms',
  11 {
  12         init : function( editor )
  13         {
  14                 var lang = editor.lang;
  15
  16                 editor.addCss(
  17                         'form' +
  18                         '{' +
  19                                 'border: 1px dotted #FF0000;' +
  20                                 'padding: 2px;' +
  21                         '}\n' );
  22
  23                 editor.addCss(
  24                         'img.cke_hidden' +
  25                         '{' +
  26                                 'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/hiddenfield.gif' ) + ');' +
  27                                 'background-position: center center;' +
  28                                 'background-repeat: no-repeat;' +
  29                                 'border: 1px solid #a9a9a9;' +
  30                                 'width: 16px !important;' +
  31                                 'height: 16px !important;' +
  32                         '}' );
  33
  34                 // All buttons use the same code to register. So, to avoid
  35                 // duplications, let's use this tool function.
  36                 var addButtonCommand = function( buttonName, commandName, dialogFile )
  37                 {
  38                         editor.addCommand( commandName, new CKEDITOR.dialogCommand( commandName ) );
  39
  40                         editor.ui.addButton( buttonName,
  41                                 {
  42                                         label : lang.common[ buttonName.charAt(0).toLowerCase() + buttonName.slice(1) ],
  43                                         command : commandName
  44                                 });
  45                         CKEDITOR.dialog.add( commandName, dialogFile );
  46                 };
  47
  48                 var dialogPath = this.path + 'dialogs/';
  49                 addButtonCommand( 'Form',                       'form',                 dialogPath + 'form.js' );
  50                 addButtonCommand( 'Checkbox',           'checkbox',             dialogPath + 'checkbox.js' );
  51                 addButtonCommand( 'Radio',                      'radio',                dialogPath + 'radio.js' );
  52                 addButtonCommand( 'TextField',          'textfield',    dialogPath + 'textfield.js' );
  53                 addButtonCommand( 'Textarea',           'textarea',             dialogPath + 'textarea.js' );
  54                 addButtonCommand( 'Select',                     'select',               dialogPath + 'select.js' );
  55                 addButtonCommand( 'Button',                     'button',               dialogPath + 'button.js' );
  56                 addButtonCommand( 'ImageButton',        'imagebutton',  CKEDITOR.plugins.getPath('image') + 'dialogs/image.js' );
  57                 addButtonCommand( 'HiddenField',        'hiddenfield',  dialogPath + 'hiddenfield.js' );
  58
  59                 // If the "menu" plugin is loaded, register the menu items.
  60                 if ( editor.addMenuItems )
  61                 {
  62                         editor.addMenuItems(
  63                                 {
  64                                         form :
  65                                         {
  66                                                 label : lang.form.menu,
  67                                                 command : 'form',
  68                                                 group : 'form'
  69                                         },
  70
  71                                         checkbox :
  72                                         {
  73                                                 label : lang.checkboxAndRadio.checkboxTitle,
  74                                                 command : 'checkbox',
  75                                                 group : 'checkbox'
  76                                         },
  77
  78                                         radio :
  79                                         {
  80                                                 label : lang.checkboxAndRadio.radioTitle,
  81                                                 command : 'radio',
  82                                                 group : 'radio'
  83                                         },
  84
  85                                         textfield :
  86                                         {
  87                                                 label : lang.textfield.title,
  88                                                 command : 'textfield',
  89                                                 group : 'textfield'
  90                                         },
  91
  92                                         hiddenfield :
  93                                         {
  94                                                 label : lang.hidden.title,
  95                                                 command : 'hiddenfield',
  96                                                 group : 'hiddenfield'
  97                                         },
  98
  99                                         imagebutton :
 100                                         {
 101                                                 label : lang.image.titleButton,
 102                                                 command : 'imagebutton',
 103                                                 group : 'imagebutton'
 104                                         },
 105
 106                                         button :
 107                                         {
 108                                                 label : lang.button.title,
 109                                                 command : 'button',
 110                                                 group : 'button'
 111                                         },
 112
 113                                         select :
 114                                         {
 115                                                 label : lang.select.title,
 116                                                 command : 'select',
 117                                                 group : 'select'
 118                                         },
 119
 120                                         textarea :
 121                                         {
 122                                                 label : lang.textarea.title,
 123                                                 command : 'textarea',
 124                                                 group : 'textarea'
 125                                         }
 126                                 });
 127                 }
 128
 129                 // If the "contextmenu" plugin is loaded, register the listeners.
 130                 if ( editor.contextMenu )
 131                 {
 132                         editor.contextMenu.addListener( function( element )
 133                                 {
 134                                         if ( element && element.hasAscendant( 'form', true ) && !element.isReadOnly() )
 135                                                 return { form : CKEDITOR.TRISTATE_OFF };
 136                                 });
 137
 138                         editor.contextMenu.addListener( function( element )
 139                                 {
 140                                         if ( element && !element.isReadOnly() )
 141                                         {
 142                                                 var name = element.getName();
 143
 144                                                 if ( name == 'select' )
 145                                                         return { select : CKEDITOR.TRISTATE_OFF };
 146
 147                                                 if ( name == 'textarea' )
 148                                                         return { textarea : CKEDITOR.TRISTATE_OFF };
 149
 150                                                 if ( name == 'input' )
 151                                                 {
 152                                                         switch( element.getAttribute( 'type' ) )
 153                                                         {
 154                                                                 case 'button' :
 155                                                                 case 'submit' :
 156                                                                 case 'reset' :
 157                                                                         return { button : CKEDITOR.TRISTATE_OFF };
 158
 159                                                                 case 'checkbox' :
 160                                                                         return { checkbox : CKEDITOR.TRISTATE_OFF };
 161
 162                                                                 case 'radio' :
 163                                                                         return { radio : CKEDITOR.TRISTATE_OFF };
 164
 165                                                                 case 'image' :
 166                                                                         return { imagebutton : CKEDITOR.TRISTATE_OFF };
 167
 168                                                                 default :
 169                                                                         return { textfield : CKEDITOR.TRISTATE_OFF };
 170                                                         }
 171                                                 }
 172
 173                                                 if ( name == 'img' && element.data( 'cke-real-element-type' ) == 'hiddenfield' )
 174                                                         return { hiddenfield : CKEDITOR.TRISTATE_OFF };
 175                                         }
 176                                 });
 177                 }
 178
 179                 editor.on( 'doubleclick', function( evt )
 180                         {
 181                                 var element = evt.data.element;
 182
 183                                 if ( element.is( 'form' ) )
 184                                         evt.data.dialog = 'form';
 185                                 else if ( element.is( 'select' ) )
 186                                         evt.data.dialog = 'select';
 187                                 else if ( element.is( 'textarea' ) )
 188                                         evt.data.dialog = 'textarea';
 189                                 else if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == 'hiddenfield' )
 190                                         evt.data.dialog = 'hiddenfield';
 191                                 else if ( element.is( 'input' ) )
 192                                 {
 193                                         switch ( element.getAttribute( 'type' ) )
 194                                         {
 195                                                 case 'button' :
 196                                                 case 'submit' :
 197                                                 case 'reset' :
 198                                                         evt.data.dialog = 'button';
 199                                                         break;
 200                                                 case 'checkbox' :
 201                                                         evt.data.dialog = 'checkbox';
 202                                                         break;
 203                                                 case 'radio' :
 204                                                         evt.data.dialog = 'radio';
 205                                                         break;
 206                                                 case 'image' :
 207                                                         evt.data.dialog = 'imagebutton';
 208                                                         break;
 209                                                 default :
 210                                                         evt.data.dialog = 'textfield';
 211                                                         break;
 212                                         }
 213                                 }
 214                         });
 215         },
 216
 217         afterInit : function( editor )
 218         {
 219                 var dataProcessor = editor.dataProcessor,
 220                         htmlFilter = dataProcessor && dataProcessor.htmlFilter,
 221                         dataFilter = dataProcessor && dataProcessor.dataFilter;
 222
 223                 // Cleanup certain IE form elements default values.
 224                 if ( CKEDITOR.env.ie )
 225                 {
 226                         htmlFilter && htmlFilter.addRules(
 227                         {
 228                                 elements :
 229                                 {
 230                                         input : function( input )
 231                                         {
 232                                                 var attrs = input.attributes,
 233                                                         type = attrs.type;
 234                                                 // Old IEs don't provide type for Text inputs #5522
 235                                                 if ( !type )
 236                                                         attrs.type = 'text';
 237                                                 if ( type == 'checkbox' || type == 'radio' )
 238                                                         attrs.value == 'on' && delete attrs.value;
 239                                         }
 240                                 }
 241                         } );
 242                 }
 243
 244                 if ( dataFilter )
 245                 {
 246                         dataFilter.addRules(
 247                         {
 248                                 elements :
 249                                 {
 250                                         input : function( element )
 251                                         {
 252                                                 if ( element.attributes.type == 'hidden' )
 253                                                         return editor.createFakeParserElement( element, 'cke_hidden', 'hiddenfield' );
 254                                         }
 255                                 }
 256                         } );
 257                 }
 258         },
 259         requires : [ 'image', 'fakeobjects' ]
 260 } );
 261
 262 if ( CKEDITOR.env.ie )
 263 {
 264         CKEDITOR.dom.element.prototype.hasAttribute = CKEDITOR.tools.override( CKEDITOR.dom.element.prototype.hasAttribute,
 265                 function( original )
 266                 {
 267                         return function( name )
 268                                 {
 269                                         var $attr = this.$.attributes.getNamedItem( name );
 270
 271                                         if ( this.getName() == 'input' )
 272                                         {
 273                                                 switch ( name )
 274                                                 {
 275                                                         case 'class' :
 276                                                                 return this.$.className.length > 0;
 277                                                         case 'checked' :
 278                                                                 return !!this.$.checked;
 279                                                         case 'value' :
 280                                                                 var type = this.getAttribute( 'type' );
 281                                                                 return type == 'checkbox' || type == 'radio' ? this.$.value != 'on' : this.$.value;
 282                                                 }
 283                                         }
 284
 285                                         return original.apply( this, arguments );
 286                                 };
 287                 });
 288 }