plugin.js 8.6 KB

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