_source/plugins/forms/plugin.js

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