iframe.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  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. ( function() {
  6. // Map 'true' and 'false' values to match W3C's specifications
  7. // http://www.w3.org/TR/REC-html40/present/frames.html#h-16.5
  8. var checkboxValues = {
  9. scrolling: { 'true': 'yes', 'false': 'no' },
  10. frameborder: { 'true': '1', 'false': '0' }
  11. };
  12. function loadValue( iframeNode ) {
  13. var isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox;
  14. if ( iframeNode.hasAttribute( this.id ) ) {
  15. var value = iframeNode.getAttribute( this.id );
  16. if ( isCheckbox )
  17. this.setValue( checkboxValues[ this.id ][ 'true' ] == value.toLowerCase() );
  18. else
  19. this.setValue( value );
  20. }
  21. }
  22. function commitValue( iframeNode ) {
  23. var isRemove = this.getValue() === '',
  24. isCheckbox = this instanceof CKEDITOR.ui.dialog.checkbox,
  25. value = this.getValue();
  26. if ( isRemove )
  27. iframeNode.removeAttribute( this.att || this.id );
  28. else if ( isCheckbox )
  29. iframeNode.setAttribute( this.id, checkboxValues[ this.id ][ value ] );
  30. else
  31. iframeNode.setAttribute( this.att || this.id, value );
  32. }
  33. CKEDITOR.dialog.add( 'iframe', function( editor ) {
  34. var iframeLang = editor.lang.iframe,
  35. commonLang = editor.lang.common,
  36. dialogadvtab = editor.plugins.dialogadvtab;
  37. return {
  38. title: iframeLang.title,
  39. minWidth: 350,
  40. minHeight: 260,
  41. onShow: function() {
  42. // Clear previously saved elements.
  43. this.fakeImage = this.iframeNode = null;
  44. var fakeImage = this.getSelectedElement();
  45. if ( fakeImage && fakeImage.data( 'cke-real-element-type' ) && fakeImage.data( 'cke-real-element-type' ) == 'iframe' ) {
  46. this.fakeImage = fakeImage;
  47. var iframeNode = editor.restoreRealElement( fakeImage );
  48. this.iframeNode = iframeNode;
  49. this.setupContent( iframeNode );
  50. }
  51. },
  52. onOk: function() {
  53. var iframeNode;
  54. if ( !this.fakeImage )
  55. iframeNode = new CKEDITOR.dom.element( 'iframe' );
  56. else
  57. iframeNode = this.iframeNode;
  58. // A subset of the specified attributes/styles
  59. // should also be applied on the fake element to
  60. // have better visual effect. (#5240)
  61. var extraStyles = {},
  62. extraAttributes = {};
  63. this.commitContent( iframeNode, extraStyles, extraAttributes );
  64. // Refresh the fake image.
  65. var newFakeImage = editor.createFakeElement( iframeNode, 'cke_iframe', 'iframe', true );
  66. newFakeImage.setAttributes( extraAttributes );
  67. newFakeImage.setStyles( extraStyles );
  68. if ( this.fakeImage ) {
  69. newFakeImage.replace( this.fakeImage );
  70. editor.getSelection().selectElement( newFakeImage );
  71. } else {
  72. editor.insertElement( newFakeImage );
  73. }
  74. },
  75. contents: [ {
  76. id: 'info',
  77. label: commonLang.generalTab,
  78. accessKey: 'I',
  79. elements: [ {
  80. type: 'vbox',
  81. padding: 0,
  82. children: [ {
  83. id: 'src',
  84. type: 'text',
  85. label: commonLang.url,
  86. required: true,
  87. validate: CKEDITOR.dialog.validate.notEmpty( iframeLang.noUrl ),
  88. setup: loadValue,
  89. commit: commitValue
  90. } ]
  91. },
  92. {
  93. type: 'hbox',
  94. children: [ {
  95. id: 'width',
  96. type: 'text',
  97. requiredContent: 'iframe[width]',
  98. style: 'width:100%',
  99. labelLayout: 'vertical',
  100. label: commonLang.width,
  101. validate: CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.width ) ),
  102. setup: loadValue,
  103. commit: commitValue
  104. },
  105. {
  106. id: 'height',
  107. type: 'text',
  108. requiredContent: 'iframe[height]',
  109. style: 'width:100%',
  110. labelLayout: 'vertical',
  111. label: commonLang.height,
  112. validate: CKEDITOR.dialog.validate.htmlLength( commonLang.invalidHtmlLength.replace( '%1', commonLang.height ) ),
  113. setup: loadValue,
  114. commit: commitValue
  115. },
  116. {
  117. id: 'align',
  118. type: 'select',
  119. requiredContent: 'iframe[align]',
  120. 'default': '',
  121. items: [
  122. [ commonLang.notSet, '' ],
  123. [ commonLang.alignLeft, 'left' ],
  124. [ commonLang.alignRight, 'right' ],
  125. [ commonLang.alignTop, 'top' ],
  126. [ commonLang.alignMiddle, 'middle' ],
  127. [ commonLang.alignBottom, 'bottom' ]
  128. ],
  129. style: 'width:100%',
  130. labelLayout: 'vertical',
  131. label: commonLang.align,
  132. setup: function( iframeNode, fakeImage ) {
  133. loadValue.apply( this, arguments );
  134. if ( fakeImage ) {
  135. var fakeImageAlign = fakeImage.getAttribute( 'align' );
  136. this.setValue( fakeImageAlign && fakeImageAlign.toLowerCase() || '' );
  137. }
  138. },
  139. commit: function( iframeNode, extraStyles, extraAttributes ) {
  140. commitValue.apply( this, arguments );
  141. if ( this.getValue() )
  142. extraAttributes.align = this.getValue();
  143. }
  144. } ]
  145. },
  146. {
  147. type: 'hbox',
  148. widths: [ '50%', '50%' ],
  149. children: [ {
  150. id: 'scrolling',
  151. type: 'checkbox',
  152. requiredContent: 'iframe[scrolling]',
  153. label: iframeLang.scrolling,
  154. setup: loadValue,
  155. commit: commitValue
  156. },
  157. {
  158. id: 'frameborder',
  159. type: 'checkbox',
  160. requiredContent: 'iframe[frameborder]',
  161. label: iframeLang.border,
  162. setup: loadValue,
  163. commit: commitValue
  164. } ]
  165. },
  166. {
  167. type: 'hbox',
  168. widths: [ '50%', '50%' ],
  169. children: [ {
  170. id: 'name',
  171. type: 'text',
  172. requiredContent: 'iframe[name]',
  173. label: commonLang.name,
  174. setup: loadValue,
  175. commit: commitValue
  176. },
  177. {
  178. id: 'title',
  179. type: 'text',
  180. requiredContent: 'iframe[title]',
  181. label: commonLang.advisoryTitle,
  182. setup: loadValue,
  183. commit: commitValue
  184. } ]
  185. },
  186. {
  187. id: 'longdesc',
  188. type: 'text',
  189. requiredContent: 'iframe[longdesc]',
  190. label: commonLang.longDescr,
  191. setup: loadValue,
  192. commit: commitValue
  193. } ]
  194. },
  195. dialogadvtab && dialogadvtab.createAdvancedTab( editor, { id: 1, classes: 1, styles: 1 }, 'iframe' )
  196. ] };
  197. } );
  198. } )();