plugin.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403
  1. /**
  2. * oEmbed Plugin plugin
  3. * Licensed under the MIT license
  4. * jQuery Embed Plugin: http://code.google.com/p/jquery-oembed/ (MIT License)
  5. * Plugin for: http://ckeditor.com/license (GPL/LGPL/MPL: http://ckeditor.com/license)
  6. */
  7. (function() {
  8. CKEDITOR.plugins.add('oembed', {
  9. icons: 'oembed',
  10. hidpi: true,
  11. requires: 'widget,dialog',
  12. lang: ['de', 'en', 'fr', 'nl', 'pl', 'pt-br', 'ru'],
  13. afterInit: function(editor) {
  14. /*var dataProcessor = editor.dataProcessor,
  15. dataFilter = dataProcessor && dataProcessor.dataFilter;
  16. if (editor.config.oembed_ShowIframePreview) {
  17. if (dataFilter.elementsRules.iframe) {
  18. delete dataFilter.elementsRules.iframe;
  19. }
  20. return;
  21. }
  22. if (dataFilter && !dataFilter.elementsRules.iframe) {
  23. dataFilter.addRules({
  24. elements: {
  25. iframe: function(element) {
  26. return editor.createFakeParserElement(element, 'cke_iframe', 'iframe', true);
  27. }
  28. }
  29. });
  30. }*/
  31. },
  32. init: function(editor) {
  33. if (editor.config.oembed_ShowIframePreview == null || editor.config.oembed_ShowIframePreview == 'undefined') {
  34. editor.config.oembed_ShowIframePreview = false;
  35. }
  36. if (!editor.plugins.iframe && !editor.config.oembed_ShowIframePreview) {
  37. CKEDITOR.addCss('img.cke_iframe' +
  38. '{' +
  39. 'background-image: url(' + CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'images/placeholder.png') + ');' +
  40. 'background-position: center center;' +
  41. 'background-repeat: no-repeat;' +
  42. 'border: 1px solid #a9a9a9;' +
  43. 'width: 80px;' +
  44. 'height: 80px;' +
  45. '}'
  46. );
  47. }
  48. // Load jquery?
  49. loadjQueryLibaries();
  50. CKEDITOR.tools.extend(CKEDITOR.editor.prototype, {
  51. oEmbed: function(url, maxWidth, maxHeight, responsiveResize) {
  52. if (url.length < 1 || url.indexOf('http') < 0) {
  53. alert(editor.lang.oembed.invalidUrl);
  54. return false;
  55. }
  56. if (typeof(jQuery.fn.oembed) === 'undefined') {
  57. CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'), function() {
  58. embed();
  59. });
  60. } else {
  61. embed();
  62. }
  63. function embed() {
  64. if (maxWidth == null || maxWidth == 'undefined') {
  65. maxWidth = null;
  66. }
  67. if (maxHeight == null || maxHeight == 'undefined') {
  68. maxHeight = null;
  69. }
  70. if (responsiveResize == null || responsiveResize == 'undefined') {
  71. responsiveResize = false;
  72. }
  73. embedCode(url, editor, false, maxWidth, maxHeight, responsiveResize);
  74. }
  75. return true;
  76. }
  77. });
  78. editor.widgets.add('oembed', {
  79. mask: true,
  80. dialog: 'oembed',
  81. button: editor.lang.oembed.button,
  82. allowedContent: 'div(!' + (editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent") + ');div iframe[*]',
  83. template:
  84. '<div class="' + (editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent") + '">' +
  85. '</div>',
  86. upcast: function(element) {
  87. return element.name == 'div' && element.hasClass(editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent");
  88. },
  89. });
  90. var resizeTypeChanged = function() {
  91. var dialog = this.getDialog(),
  92. resizetype = this.getValue(),
  93. maxSizeBox = dialog.getContentElement('general', 'maxSizeBox').getElement(),
  94. sizeBox = dialog.getContentElement('general', 'sizeBox').getElement();
  95. if (resizetype == 'noresize') {
  96. maxSizeBox.hide();
  97. sizeBox.hide();
  98. } else if (resizetype == "custom") {
  99. maxSizeBox.hide();
  100. sizeBox.show();
  101. } else {
  102. maxSizeBox.show();
  103. sizeBox.hide();
  104. }
  105. };
  106. String.prototype.beginsWith = function(string) {
  107. return (this.indexOf(string) === 0);
  108. };
  109. function loadjQueryLibaries() {
  110. if (typeof(jQuery) === 'undefined') {
  111. CKEDITOR.scriptLoader.load('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() {
  112. if (typeof(jQuery.fn.oembed) === 'undefined') {
  113. CKEDITOR.scriptLoader.load(
  114. CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js')
  115. );
  116. }
  117. });
  118. } else if (typeof(jQuery.fn.oembed) === 'undefined') {
  119. CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'));
  120. }
  121. }
  122. function embedCode(url, instance, closeDialog, maxWidth, maxHeight, responsiveResize, widget) {
  123. var extraProviderParams = {};
  124. if (responsiveResize) {
  125. extraProviderParams.responsive = true;
  126. }
  127. jQuery('body').oembed(url, {
  128. onEmbed: function(e) {
  129. var codeElement,
  130. codeIframe,
  131. elementAdded = false;
  132. if (typeof e.code === 'string') {
  133. codeElement = CKEDITOR.dom.element.createFromHtml(e.code);
  134. if (widget.element.$.firstChild) {
  135. widget.element.$.removeChild(widget.element.$.firstChild);
  136. }
  137. /*if (codeElement.$.tagName == "IFRAME" && editor.config.oembed_ShowIframePreview === false) {
  138. codeIframe = editor.createFakeElement(codeElement, 'cke_iframe', 'iframe', true);
  139. widget.element.appendHtml(codeIframe.$.outerHTML);
  140. } else {
  141. widget.element.appendHtml(e.code);
  142. }*/
  143. widget.element.appendHtml(e.code);
  144. elementAdded = true;
  145. } else if (typeof e.code[0].outerHTML === 'string') {
  146. codeElement = CKEDITOR.dom.element.createFromHtml(e.code[0].outerHTML);
  147. if (widget.element.$.firstChild) {
  148. widget.element.$.removeChild(widget.element.$.firstChild);
  149. }
  150. /*if (codeElement.$.tagName == "IFRAME" && editor.config.oembed_ShowIframePreview === false) {
  151. codeIframe = editor.createFakeElement(codeElement, 'cke_iframe', 'iframe', true);
  152. widget.element.appendHtml(codeIframe.$.outerHTML);
  153. } else {
  154. widget.element.appendHtml(e.code[0].outerHTML);
  155. }*/
  156. widget.element.appendHtml(e.code[0].outerHTML);
  157. elementAdded = true;
  158. } else {
  159. alert(editor.lang.oembed.noEmbedCode);
  160. }
  161. if (elementAdded) {
  162. if (closeDialog && CKEDITOR.dialog.getCurrent()) {
  163. CKEDITOR.dialog.getCurrent().hide();
  164. }
  165. }
  166. },
  167. onError: function(externalUrl) {
  168. if (externalUrl.indexOf("vimeo.com") > 0) {
  169. alert(editor.lang.oembed.noVimeo);
  170. } else {
  171. alert(editor.lang.oembed.Error);
  172. }
  173. },
  174. maxHeight: maxHeight,
  175. maxWidth: maxWidth,
  176. useResponsiveResize: responsiveResize,
  177. embedMethod: 'editor',
  178. 'vimeo': extraProviderParams
  179. });
  180. }
  181. CKEDITOR.dialog.add('oembed', function(editor) {
  182. return {
  183. title: editor.lang.oembed.title,
  184. minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 568 : 550,
  185. minHeight: 155,
  186. onShow: function() {
  187. var resizetype = CKEDITOR.dialog.getCurrent().getContentElement('general', 'resizeType').getValue(),
  188. maxSizeBox = CKEDITOR.dialog.getCurrent().getContentElement('general', 'maxSizeBox').getElement(),
  189. sizeBox = CKEDITOR.dialog.getCurrent().getContentElement('general', 'sizeBox').getElement();
  190. if (resizetype == 'noresize') {
  191. maxSizeBox.hide();
  192. sizeBox.hide();
  193. } else if (resizetype == "custom") {
  194. maxSizeBox.hide();
  195. sizeBox.show();
  196. } else {
  197. maxSizeBox.show();
  198. sizeBox.hide();
  199. }
  200. },
  201. onOk: function() {
  202. },
  203. contents: [{
  204. label: editor.lang.common.generalTab,
  205. id: 'general',
  206. elements: [{
  207. type: 'html',
  208. id: 'oembedHeader',
  209. html: '<div style="white-space:normal;width:500px;padding-bottom:10px">' + editor.lang.oembed.pasteUrl + '</div>'
  210. }, {
  211. type: 'text',
  212. id: 'embedCode',
  213. focus: function() {
  214. this.getElement().focus();
  215. },
  216. label: editor.lang.oembed.url,
  217. title: editor.lang.oembed.pasteUrl,
  218. setup: function(widget) {
  219. if (widget.data.oembed) {
  220. this.setValue(widget.data.oembed);
  221. }
  222. },
  223. commit: function(widget) {
  224. var inputCode = CKEDITOR.dialog.getCurrent().getValueOf('general', 'embedCode'),
  225. resizetype = CKEDITOR.dialog.getCurrent().getContentElement('general', 'resizeType').
  226. getValue(),
  227. maxWidth = null,
  228. maxHeight = null,
  229. responsiveResize = false,
  230. editorInstance = CKEDITOR.dialog.getCurrent().getParentEditor(),
  231. closeDialog = CKEDITOR.dialog.getCurrent().getContentElement('general', 'autoCloseDialog').
  232. getValue();
  233. if (inputCode.length < 1 || inputCode.indexOf('http') < 0) {
  234. alert(editor.lang.oembed.invalidUrl);
  235. return false;
  236. }
  237. if (resizetype == "noresize") {
  238. responsiveResize = false;
  239. } else {
  240. if (resizetype == "responsive") {
  241. maxWidth = CKEDITOR.dialog.getCurrent().getContentElement('general', 'maxWidth').
  242. getInputElement().
  243. getValue();
  244. maxHeight = CKEDITOR.dialog.getCurrent().getContentElement('general', 'maxHeight').
  245. getInputElement().
  246. getValue();
  247. responsiveResize = true;
  248. } else if (resizetype == "custom") {
  249. maxWidth = CKEDITOR.dialog.getCurrent().getContentElement('general', 'width').
  250. getInputElement().
  251. getValue();
  252. maxHeight = CKEDITOR.dialog.getCurrent().getContentElement('general', 'height').
  253. getInputElement().
  254. getValue();
  255. responsiveResize = false;
  256. }
  257. }
  258. // support for multiple urls
  259. if (inputCode.indexOf(";") > 0) {
  260. var urls = inputCode.split(";");
  261. for (var i = 0; i < urls.length; i++) {
  262. var url = urls[i];
  263. if (url.length > 1 && url.beginsWith('http')) {
  264. embedCode(url, editorInstance, false, maxWidth, maxHeight, responsiveResize, widget);
  265. }
  266. // close after last
  267. if (i == urls.length - 1) {
  268. CKEDITOR.dialog.getCurrent().hide();
  269. }
  270. }
  271. } else {
  272. // single url
  273. embedCode(inputCode, editorInstance, closeDialog, maxWidth, maxHeight, responsiveResize, widget);
  274. }
  275. widget.setData('oembed', this.getValue());
  276. }
  277. }, {
  278. type: 'hbox',
  279. widths: ['50%', '50%'],
  280. children: [{
  281. id: 'resizeType',
  282. type: 'select',
  283. label: editor.lang.oembed.resizeType,
  284. 'default': 'noresize',
  285. items: [
  286. [editor.lang.oembed.noresize, 'noresize'],
  287. [editor.lang.oembed.responsive, 'responsive'],
  288. [editor.lang.oembed.custom, 'custom']
  289. ],
  290. onChange: resizeTypeChanged
  291. }, {
  292. type: 'hbox',
  293. id: 'maxSizeBox',
  294. widths: ['120px', '120px'],
  295. style: 'float:left;position:absolute;left:58%;width:200px',
  296. children: [{
  297. type: 'text',
  298. width: '100px',
  299. id: 'maxWidth',
  300. 'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',
  301. label: editor.lang.oembed.maxWidth,
  302. title: editor.lang.oembed.maxWidthTitle
  303. }, {
  304. type: 'text',
  305. id: 'maxHeight',
  306. width: '120px',
  307. 'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',
  308. label: editor.lang.oembed.maxHeight,
  309. title: editor.lang.oembed.maxHeightTitle
  310. }]
  311. }, {
  312. type: 'hbox',
  313. id: 'sizeBox',
  314. widths: ['120px', '120px'],
  315. style: 'float:left;position:absolute;left:58%;width:200px',
  316. children: [{
  317. type: 'text',
  318. id: 'width',
  319. width: '100px',
  320. 'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',
  321. label: editor.lang.oembed.width,
  322. title: editor.lang.oembed.widthTitle
  323. }, {
  324. type: 'text',
  325. id: 'height',
  326. width: '120px',
  327. 'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',
  328. label: editor.lang.oembed.height,
  329. title: editor.lang.oembed.heightTitle
  330. }]
  331. }]
  332. }, {
  333. type: 'checkbox',
  334. id: 'autoCloseDialog',
  335. 'default': 'checked',
  336. label: editor.lang.oembed.autoClose,
  337. title: editor.lang.oembed.autoClose
  338. }]
  339. }]
  340. };
  341. });
  342. }//
  343. });
  344. }
  345. )();