textfield.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  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. CKEDITOR.dialog.add( 'textfield', function( editor ) {
  6. var acceptedTypes = { email: 1, password: 1, search: 1, tel: 1, text: 1, url: 1 };
  7. function autoCommit( data ) {
  8. var element = data.element;
  9. var value = this.getValue();
  10. value ? element.setAttribute( this.id, value ) : element.removeAttribute( this.id );
  11. }
  12. function autoSetup( element ) {
  13. var value = element.hasAttribute( this.id ) && element.getAttribute( this.id );
  14. this.setValue( value || '' );
  15. }
  16. return {
  17. title: editor.lang.forms.textfield.title,
  18. minWidth: 350,
  19. minHeight: 150,
  20. onShow: function() {
  21. delete this.textField;
  22. var element = this.getParentEditor().getSelection().getSelectedElement();
  23. if ( element && element.getName() == 'input' && ( acceptedTypes[ element.getAttribute( 'type' ) ] || !element.getAttribute( 'type' ) ) ) {
  24. this.textField = element;
  25. this.setupContent( element );
  26. }
  27. },
  28. onOk: function() {
  29. var editor = this.getParentEditor(),
  30. element = this.textField,
  31. isInsertMode = !element;
  32. if ( isInsertMode ) {
  33. element = editor.document.createElement( 'input' );
  34. element.setAttribute( 'type', 'text' );
  35. }
  36. var data = { element: element };
  37. if ( isInsertMode )
  38. editor.insertElement( data.element );
  39. this.commitContent( data );
  40. // Element might be replaced by commitment.
  41. if ( !isInsertMode )
  42. editor.getSelection().selectElement( data.element );
  43. },
  44. onLoad: function() {
  45. this.foreach( function( contentObj ) {
  46. if ( contentObj.getValue ) {
  47. if ( !contentObj.setup )
  48. contentObj.setup = autoSetup;
  49. if ( !contentObj.commit )
  50. contentObj.commit = autoCommit;
  51. }
  52. } );
  53. },
  54. contents: [ {
  55. id: 'info',
  56. label: editor.lang.forms.textfield.title,
  57. title: editor.lang.forms.textfield.title,
  58. elements: [ {
  59. type: 'hbox',
  60. widths: [ '50%', '50%' ],
  61. children: [ {
  62. id: '_cke_saved_name',
  63. type: 'text',
  64. label: editor.lang.forms.textfield.name,
  65. 'default': '',
  66. accessKey: 'N',
  67. setup: function( element ) {
  68. this.setValue( element.data( 'cke-saved-name' ) || element.getAttribute( 'name' ) || '' );
  69. },
  70. commit: function( data ) {
  71. var element = data.element;
  72. if ( this.getValue() )
  73. element.data( 'cke-saved-name', this.getValue() );
  74. else {
  75. element.data( 'cke-saved-name', false );
  76. element.removeAttribute( 'name' );
  77. }
  78. }
  79. },
  80. {
  81. id: 'value',
  82. type: 'text',
  83. label: editor.lang.forms.textfield.value,
  84. 'default': '',
  85. accessKey: 'V',
  86. commit: function( data ) {
  87. if ( CKEDITOR.env.ie && !this.getValue() ) {
  88. var element = data.element,
  89. fresh = new CKEDITOR.dom.element( 'input', editor.document );
  90. element.copyAttributes( fresh, { value: 1 } );
  91. fresh.replace( element );
  92. data.element = fresh;
  93. } else {
  94. autoCommit.call( this, data );
  95. }
  96. }
  97. } ]
  98. },
  99. {
  100. type: 'hbox',
  101. widths: [ '50%', '50%' ],
  102. children: [ {
  103. id: 'size',
  104. type: 'text',
  105. label: editor.lang.forms.textfield.charWidth,
  106. 'default': '',
  107. accessKey: 'C',
  108. style: 'width:50px',
  109. validate: CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed )
  110. },
  111. {
  112. id: 'maxLength',
  113. type: 'text',
  114. label: editor.lang.forms.textfield.maxChars,
  115. 'default': '',
  116. accessKey: 'M',
  117. style: 'width:50px',
  118. validate: CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed )
  119. } ],
  120. onLoad: function() {
  121. // Repaint the style for IE7 (#6068)
  122. if ( CKEDITOR.env.ie7Compat )
  123. this.getElement().setStyle( 'zoom', '100%' );
  124. }
  125. },
  126. {
  127. id: 'type',
  128. type: 'select',
  129. label: editor.lang.forms.textfield.type,
  130. 'default': 'text',
  131. accessKey: 'M',
  132. items: [
  133. [ editor.lang.forms.textfield.typeEmail, 'email' ],
  134. [ editor.lang.forms.textfield.typePass, 'password' ],
  135. [ editor.lang.forms.textfield.typeSearch, 'search' ],
  136. [ editor.lang.forms.textfield.typeTel, 'tel' ],
  137. [ editor.lang.forms.textfield.typeText, 'text' ],
  138. [ editor.lang.forms.textfield.typeUrl, 'url' ]
  139. ],
  140. setup: function( element ) {
  141. this.setValue( element.getAttribute( 'type' ) );
  142. },
  143. commit: function( data ) {
  144. var element = data.element;
  145. if ( CKEDITOR.env.ie ) {
  146. var elementType = element.getAttribute( 'type' );
  147. var myType = this.getValue();
  148. if ( elementType != myType ) {
  149. var replace = CKEDITOR.dom.element.createFromHtml( '<input type="' + myType + '"></input>', editor.document );
  150. element.copyAttributes( replace, { type: 1 } );
  151. replace.replace( element );
  152. data.element = replace;
  153. }
  154. } else {
  155. element.setAttribute( 'type', this.getValue() );
  156. }
  157. }
  158. },
  159. {
  160. id: 'required',
  161. type: 'checkbox',
  162. label: editor.lang.forms.textfield.required,
  163. 'default': '',
  164. accessKey: 'Q',
  165. value: 'required',
  166. setup: function( element ) {
  167. this.setValue( element.getAttribute( 'required' ) );
  168. },
  169. commit: function( data ) {
  170. var element = data.element;
  171. if ( this.getValue() )
  172. element.setAttribute( 'required', 'required' );
  173. else
  174. element.removeAttribute( 'required' );
  175. }
  176. } ]
  177. } ]
  178. };
  179. } );