plugin.js 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. /**
  2. * Plugin inserting Slide Shows elements into CKEditor editing area.
  3. *
  4. * Created out of the CKEditor Plugin SDK:
  5. * http://docs.ckeditor.com/#!/guide/plugin_sdk_sample_1
  6. *
  7. * Copyright (c) 2003-2013, Cricri042. All rights reserved.
  8. * Targeted for "ad-gallery" JavaScript : http://adgallery.codeplex.com/
  9. * And "Fancybox" : http://fancyapps.com/fancybox/
  10. *
  11. */
  12. // Register the plugin within the editor.
  13. ( function() {
  14. if (!window.console) console = {log: function() {}};
  15. if (!Array.prototype.forEach) {
  16. Array.prototype.forEach = function (fn, scope) {
  17. 'use strict';
  18. var i, len;
  19. for (i = 0, len = this.length; i < len; ++i) {
  20. if (i in this) {
  21. fn.call(scope, this[i], i, this);
  22. }
  23. }
  24. };
  25. }
  26. CKEDITOR.plugins.add( 'slideshow', {
  27. // Translations, available at the end of this file, without extra requests
  28. //lang : [ 'en', 'fr' ],
  29. requires: 'contextmenu,fakeobjects',
  30. lang: 'en,fr,ru,el,sr,sr-latn,pt,pt-br',
  31. getSlideShowDialogCss : function()
  32. {
  33. return 'img.cke_slideShow' +
  34. '{' +
  35. 'background-image: url(' + CKEDITOR.getUrl( this.path + 'images/placeholder.png' ) + ');' +
  36. 'background-position: center center;' +
  37. 'background-repeat: no-repeat;' +
  38. 'background-color:Azure;'+
  39. 'border: 1px solid #a9a9a9;' +
  40. 'width: 100px;' +
  41. 'height:100px;' +
  42. 'margin: 5px;' +
  43. '}';
  44. },
  45. // Register the icons.
  46. icons: 'slideshow',
  47. onLoad : function()
  48. {
  49. // v4
  50. if (CKEDITOR.addCss)
  51. CKEDITOR.addCss( this.getSlideShowDialogCss() );
  52. },
  53. // The plugin initialization logic goes inside this method.
  54. init: function( editor ) {
  55. var lang = editor.lang.slideshow;
  56. // Check for CKEditor 3.5
  57. if (typeof editor.element.data == 'undefined')
  58. {
  59. alert('The "Slide Show" plugin requires CKEditor 3.5 or newer');
  60. return;
  61. }
  62. allowed = '';
  63. allowed += ' html head title; style [media,type]; body (*)[id]; meta link [*]',
  64. allowed += '; img[*]{*}(*)';
  65. allowed += '; div[*]{*}(*)';
  66. allowed += '; script[*]{*}(*)';
  67. allowed += '; ul[*]{*}(*)';
  68. allowed += '; li[*]{*}(*)';
  69. // Register the command.
  70. editor.addCommand( 'slideshow', new CKEDITOR.dialogCommand( 'slideshowDialog', {
  71. allowedContent: allowed,
  72. requires: ['fakeobjects']
  73. } ) );
  74. // Create a toolbar button that executes the above command.
  75. editor.ui.addButton( 'Slideshow', {
  76. // The text part of the button (if available) and tooptip.
  77. label: lang.insertSlideShow,
  78. command: 'slideshow',
  79. // The button placement in the toolbar (toolbar group name).
  80. toolbar: 'insert',
  81. icon: this.path + 'icons/slideshow.png'
  82. });
  83. editor.on( 'load', function( evt ) {
  84. });
  85. editor.on( 'doubleclick', function( evt )
  86. {
  87. var element = evt.data.element;
  88. if ( element.is( 'img' ) && element.data( 'cke-real-element-type' ) == 'slideShow' )
  89. evt.data.dialog = 'slideshowDialog';
  90. });
  91. editor.on( 'instanceReady', function() {
  92. //console.log('START --------------------------');
  93. //console.log( editor.filter.allowedContent );
  94. //console.log('END ----------------------------');
  95. } );
  96. // CKEDITOR.on('instanceReady', function(event) {
  97. // event.editor.on('dialogShow', function(dialogShowEvent) {
  98. // if(CKEDITOR.env.ie) {
  99. //// $(dialogShowEvent.data. "_" .element.$).find('a[href*="void(0)"]').removeAttr('href');
  100. // }
  101. // });
  102. // });
  103. if ( editor.contextMenu ) {
  104. editor.addMenuGroup( 'slideshowGroup' );
  105. editor.addMenuItem( 'slideshowItem', {
  106. label: lang.editSlideShow,
  107. icon: this.path + 'icons/slideshow.png',
  108. command: 'slideshow',
  109. group: 'slideshowGroup'
  110. });
  111. editor.contextMenu.addListener( function( element, selection )
  112. {
  113. if ( element && element.is( 'img' ) && !element.isReadOnly()
  114. && element.data( 'cke-real-element-type' ) == 'slideShow' ) {
  115. //if ( element && element.is( 'img' ) && element.data( 'cke-real-element-type' ) == 'slideShow' ) {
  116. editor.contextMenu.removeAll(); // this line removes all entries from the context menu
  117. return { slideshowItem : CKEDITOR.TRISTATE_OFF };
  118. } else {
  119. return null;
  120. }
  121. });
  122. }
  123. // Register our dialog file. this.path is the plugin folder path.
  124. // CKEDITOR.dialog.add( 'slideshowDialog', this.path + 'dialogs/slideshow.js' );
  125. CKEDITOR.dialog.add( 'slideshowDialog', this.path + 'dialogs/slideshow.min.js' );
  126. // v3
  127. if (editor.addCss)
  128. editor.addCss( this.getSlideShowDialogCss() );
  129. // Add special handling for these items
  130. CKEDITOR.dtd.$empty['cke:source']=1;
  131. CKEDITOR.dtd.$empty['source']=1;
  132. editor.lang.fakeobjects.slideShow = lang.fakeObject;
  133. }, // Init
  134. afterInit: function( editor )
  135. {
  136. var dataProcessor = editor.dataProcessor,
  137. htmlFilter = dataProcessor && dataProcessor.htmlFilter,
  138. dataFilter = dataProcessor && dataProcessor.dataFilter;
  139. if ( dataFilter ) {
  140. dataFilter.addRules({
  141. elements: {
  142. div : function( realElement )
  143. {
  144. if (realElement.attributes['class'] == 'slideshowPlugin') {
  145. //alert("dataFilter : " + realElement.attributes['class']);
  146. var fakeElement = editor.createFakeParserElement( realElement, 'cke_slideShow', 'slideShow', false ),
  147. fakeStyle = fakeElement.attributes.style || '';
  148. var imgSrc = CKEDITOR.getUrl('plugins/slideshow/images/placeholder.png' );
  149. var foundOne = false;
  150. Array.prototype.forEach.call(realElement, function( node ) {
  151. //console.log( "---------> " + node.name );
  152. if (node.name == 'img') {
  153. if (!foundOne) {
  154. //console.log( node );
  155. imgSrc = node.attributes.src;
  156. foundOne = true;
  157. }
  158. }
  159. } );
  160. //fakeStyle = fakeElement.attributes.style = fakeStyle + ' background-image:url("' + imgSrc + '"); ';
  161. //fakeStyle = fakeElement.attributes.style = fakeStyle + ' background-size:50%; ';
  162. //fakeStyle = fakeElement.attributes.style = fakeStyle + ' display:block; ';
  163. //console.log( fakeStyle );
  164. fakeStyle = fakeElement.attributes.style = fakeStyle + ' background-image:url("' + imgSrc + '"); ';
  165. fakeStyle = fakeElement.attributes.style = fakeStyle + ' background-size:contain; ';
  166. fakeStyle = fakeElement.attributes.style = fakeStyle + ' background-repeat:no-repeat; ';
  167. fakeStyle = fakeElement.attributes.style = fakeStyle + ' background-position:center; ';
  168. fakeStyle = fakeElement.attributes.style = fakeStyle + ' width:64px; ';
  169. fakeStyle = fakeElement.attributes.style = fakeStyle + ' height:64px; ';
  170. fakeStyle = fakeElement.attributes.style = fakeStyle + ' display:block; ';
  171. fakeStyle = fakeElement.attributes.style = fakeStyle + ' border:1px solid black; ';
  172. return fakeElement;
  173. }
  174. }
  175. }
  176. }, { priority: 5, applyToAll: true });
  177. }
  178. if ( htmlFilter ) {
  179. htmlFilter.addRules({
  180. elements: {
  181. $ : function( realElement )
  182. {
  183. }
  184. }
  185. });
  186. }
  187. } // afterInit
  188. });
  189. // v3
  190. if (CKEDITOR.skins)
  191. {
  192. en = { slideshow : en} ;
  193. fr = { slideshow : fr} ;
  194. ru = { slideshow : ru} ;
  195. pt = { slideshow : pt} ;
  196. el = { slideshow : el} ;
  197. sr = { slideshow : sr} ;
  198. }
  199. // Translations
  200. //CKEDITOR.plugins.setLang( 'slideshow', 'fr', fr );
  201. //CKEDITOR.plugins.setLang( 'slideshow', 'en', en );
  202. })();