sources/plugins/forms/plugin.js

   1 /**
   2  * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license
   4  */
   5
   6 /**
   7  * @fileOverview Forms Plugin
   8  */
   9
  10 CKEDITOR.plugins.add( 'forms', {
  11         requires: 'dialog,fakeobjects',
  12         // jscs:disable maximumLineLength
  13         lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
  14         // jscs:enable maximumLineLength
  15         icons: 'button,checkbox,form,hiddenfield,imagebutton,radio,select,select-rtl,textarea,textarea-rtl,textfield', // %REMOVE_LINE_CORE%
  16         hidpi: true, // %REMOVE_LINE_CORE%
  17         onLoad: function() {
  18                 CKEDITOR.addCss( '.cke_editable form' +
  19                         '{' +
  20                                 'border: 1px dotted #FF0000;' +
  21                                 'padding: 2px;' +
  22                         '}\n' );
  23
  24                 CKEDITOR.addCss( '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         },
  35         init: function( editor ) {
  36                 var lang = editor.lang,
  37                         order = 0,
  38                         textfieldTypes = { email: 1, password: 1, search: 1, tel: 1, text: 1, url: 1 },
  39                         allowedContent = {
  40                                 checkbox: 'input[type,name,checked,required]',
  41                                 radio: 'input[type,name,checked,required]',
  42                                 textfield: 'input[type,name,value,size,maxlength,required]',
  43                                 textarea: 'textarea[cols,rows,name,required]',
  44                                 select: 'select[name,size,multiple,required]; option[value,selected]',
  45                                 button: 'input[type,name,value]',
  46                                 form: 'form[action,name,id,enctype,target,method]',
  47                                 hiddenfield: 'input[type,name,value]',
  48                                 imagebutton: 'input[type,alt,src]{width,height,border,border-width,border-style,margin,float}'
  49                         },
  50                         requiredContent = {
  51                                 checkbox: 'input',
  52                                 radio: 'input',
  53                                 textfield: 'input',
  54                                 textarea: 'textarea',
  55                                 select: 'select',
  56                                 button: 'input',
  57                                 form: 'form',
  58                                 hiddenfield: 'input',
  59                                 imagebutton: 'input'
  60                         };
  61
  62                 // All buttons use the same code to register. So, to avoid
  63                 // duplications, let's use this tool function.
  64                 var addButtonCommand = function( buttonName, commandName, dialogFile ) {
  65                                 var def = {
  66                                         allowedContent: allowedContent[ commandName ],
  67                                         requiredContent: requiredContent[ commandName ]
  68                                 };
  69                                 commandName == 'form' && ( def.context = 'form' );
  70
  71                                 editor.addCommand( commandName, new CKEDITOR.dialogCommand( commandName, def ) );
  72
  73                                 editor.ui.addButton && editor.ui.addButton( buttonName, {
  74                                         label: lang.common[ buttonName.charAt( 0 ).toLowerCase() + buttonName.slice( 1 ) ],
  75                                         command: commandName,
  76                                         toolbar: 'forms,' + ( order += 10 )
  77                                 } );
  78                                 CKEDITOR.dialog.add( commandName, dialogFile );
  79                         };
  80
  81                 var dialogPath = this.path + 'dialogs/';
  82                 !editor.blockless && addButtonCommand( 'Form', 'form', dialogPath + 'form.js' );
  83                 addButtonCommand( 'Checkbox', 'checkbox', dialogPath + 'checkbox.js' );
  84                 addButtonCommand( 'Radio', 'radio', dialogPath + 'radio.js' );
  85                 addButtonCommand( 'TextField', 'textfield', dialogPath + 'textfield.js' );
  86                 addButtonCommand( 'Textarea', 'textarea', dialogPath + 'textarea.js' );
  87                 addButtonCommand( 'Select', 'select', dialogPath + 'select.js' );
  88                 addButtonCommand( 'Button', 'button', dialogPath + 'button.js' );
  89
  90                 var imagePlugin = editor.plugins.image;
  91
  92                 // Since Image plugin is disabled when Image2 is to be loaded,
  93                 // ImageButton also got to be off (#11222).
  94                 if ( imagePlugin && !editor.plugins.image2 )
  95                         addButtonCommand( 'ImageButton', 'imagebutton', CKEDITOR.plugins.getPath( 'image' ) + 'dialogs/image.js' );
  96
  97                 addButtonCommand( 'HiddenField', 'hiddenfield', dialogPath + 'hiddenfield.js' );
  98
  99                 // If the "menu" plugin is loaded, register the menu items.
 100                 if ( editor.addMenuItems ) {
 101                         var items = {
 102                                 checkbox: {
 103                                         label: lang.forms.checkboxAndRadio.checkboxTitle,
 104                                         command: 'checkbox',
 105                                         group: 'checkbox'
 106                                 },
 107
 108                                 radio: {
 109                                         label: lang.forms.checkboxAndRadio.radioTitle,
 110                                         command: 'radio',
 111                                         group: 'radio'
 112                                 },
 113
 114                                 textfield: {
 115                                         label: lang.forms.textfield.title,
 116                                         command: 'textfield',
 117                                         group: 'textfield'
 118                                 },
 119
 120                                 hiddenfield: {
 121                                         label: lang.forms.hidden.title,
 122                                         command: 'hiddenfield',
 123                                         group: 'hiddenfield'
 124                                 },
 125
 126                                 button: {
 127                                         label: lang.forms.button.title,
 128                                         command: 'button',
 129                                         group: 'button'
 130                                 },
 131
 132                                 select: {
 133                                         label: lang.forms.select.title,
 134                                         command: 'select',
 135                                         group: 'select'
 136                                 },
 137
 138                                 textarea: {
 139                                         label: lang.forms.textarea.title,
 140                                         command: 'textarea',
 141                                         group: 'textarea'
 142                                 }
 143                         };
 144
 145                         if ( imagePlugin ) {
 146                                 items.imagebutton = {
 147                                         label: lang.image.titleButton,
 148                                         command: 'imagebutton',
 149                                         group: 'imagebutton'
 150                                 };
 151                         }
 152
 153                         !editor.blockless && ( items.form = {
 154                                 label: lang.forms.form.menu,
 155                                 command: 'form',
 156                                 group: 'form'
 157                         } );
 158
 159                         editor.addMenuItems( items );
 160
 161                 }
 162
 163                 // If the "contextmenu" plugin is loaded, register the listeners.
 164                 if ( editor.contextMenu ) {
 165                         !editor.blockless && editor.contextMenu.addListener( function( element, selection, path ) {
 166                                 var form = path.contains( 'form', 1 );
 167                                 if ( form && !form.isReadOnly() )
 168                                         return { form: CKEDITOR.TRISTATE_OFF };
 169                         } );
 170
 171                         editor.contextMenu.addListener( function( element ) {
 172                                 if ( element && !element.isReadOnly() ) {
 173                                         var name = element.getName();
 174
 175                                         if ( name == 'select' )
 176                                                 return { select: CKEDITOR.TRISTATE_OFF };
 177
 178                                         if ( name == 'textarea' )
 179                                                 return { textarea: CKEDITOR.TRISTATE_OFF };
 180
 181                                         if ( name == 'input' ) {
 182                                                 var type = element.getAttribute( 'type' ) || 'text';
 183                                                 switch ( type ) {
 184                                                         case 'button':
 185                                                         case 'submit':
 186                                                         case 'reset':
 187                                                                 return { button: CKEDITOR.TRISTATE_OFF };
 188
 189                                                         case 'checkbox':
 190                                                                 return { checkbox: CKEDITOR.TRISTATE_OFF };
 191
 192                                                         case 'radio':
 193                                                                 return { radio: CKEDITOR.TRISTATE_OFF };
 194
 195                                                         case 'image':
 196                                                                 return imagePlugin ? { imagebutton: CKEDITOR.TRISTATE_OFF } : null;
 197                                                 }
 198
 199                                                 if ( textfieldTypes[ type ] )
 200                                                         return { textfield: CKEDITOR.TRISTATE_OFF };
 201                                         }
 202
 203                                         if ( name == 'img' && element.data( 'cke-real-element-type' ) == 'hiddenfield' )
 204                                                 return { hiddenfield: CKEDITOR.TRISTATE_OFF };
 205                                 }
 206                         } );
 207                 }
 208
 209                 editor.on( 'doubleclick', function( evt ) {
 210                         var element = evt.data.element;
 211
 212                         if ( !editor.blockless && element.is( 'form' ) )
 213                                 evt.data.dialog = 'form';
 214                         else if ( element.is( 'select' ) )
 215                                 evt.data.dialog = 'select';
 216                         else if ( element.is( 'textarea' ) )
 217                                 evt.data.dialog = 'textarea';
 218                         else if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == 'hiddenfield' )
 219                                 evt.data.dialog = 'hiddenfield';
 220                         else if ( element.is( 'input' ) ) {
 221                                 var type = element.getAttribute( 'type' ) || 'text';
 222                                 switch ( type ) {
 223                                         case 'button':
 224                                         case 'submit':
 225                                         case 'reset':
 226                                                 evt.data.dialog = 'button';
 227                                                 break;
 228                                         case 'checkbox':
 229                                                 evt.data.dialog = 'checkbox';
 230                                                 break;
 231                                         case 'radio':
 232                                                 evt.data.dialog = 'radio';
 233                                                 break;
 234                                         case 'image':
 235                                                 evt.data.dialog = 'imagebutton';
 236                                                 break;
 237                                 }
 238                                 if ( textfieldTypes[ type ] )
 239                                         evt.data.dialog = 'textfield';
 240                         }
 241                 } );
 242         },
 243
 244         afterInit: function( editor ) {
 245                 var dataProcessor = editor.dataProcessor,
 246                         htmlFilter = dataProcessor && dataProcessor.htmlFilter,
 247                         dataFilter = dataProcessor && dataProcessor.dataFilter;
 248
 249                 // Cleanup certain IE form elements default values.
 250                 // Note: Inputs are marked with contenteditable=false flags, so filters for them
 251                 // need to be applied to non-editable content as well.
 252                 if ( CKEDITOR.env.ie ) {
 253                         htmlFilter && htmlFilter.addRules( {
 254                                 elements: {
 255                                         input: function( input ) {
 256                                                 var attrs = input.attributes,
 257                                                         type = attrs.type;
 258                                                 // Old IEs don't provide type for Text inputs #5522
 259                                                 if ( !type )
 260                                                         attrs.type = 'text';
 261                                                 if ( type == 'checkbox' || type == 'radio' )
 262                                                         attrs.value == 'on' && delete attrs.value;
 263                                         }
 264                                 }
 265                         }, { applyToAll: true } );
 266                 }
 267
 268                 if ( dataFilter ) {
 269                         dataFilter.addRules( {
 270                                 elements: {
 271                                         input: function( element ) {
 272                                                 if ( element.attributes.type == 'hidden' )
 273                                                         return editor.createFakeParserElement( element, 'cke_hidden', 'hiddenfield' );
 274                                         }
 275                                 }
 276                         }, { applyToAll: true } );
 277                 }
 278         }
 279 } );