iframe.js 6.5 KB

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