plugin.js 17 KB

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