]>
Commit | Line | Data |
---|---|---|
1 | /**\r | |
2 | * oEmbed Plugin plugin\r | |
3 | * Licensed under the MIT license\r | |
4 | * jQuery Embed Plugin: http://code.google.com/p/jquery-oembed/ (MIT License)\r | |
5 | * Plugin for: http://ckeditor.com/license (GPL/LGPL/MPL: http://ckeditor.com/license)\r | |
6 | */\r | |
7 | \r | |
8 | (function() {\r | |
9 | CKEDITOR.plugins.add('oembed', {\r | |
10 | icons: 'oembed',\r | |
11 | hidpi: true,\r | |
12 | requires: 'widget,dialog',\r | |
13 | lang: 'de,en,fr,nl,pl,pt-br,ru,tr', // %REMOVE_LINE_CORE%\r | |
14 | version: 1.17,\r | |
15 | init: function(editor) {\r | |
16 | // Load jquery?\r | |
17 | loadjQueryLibaries();\r | |
18 | \r | |
19 | CKEDITOR.tools.extend(CKEDITOR.editor.prototype, {\r | |
20 | oEmbed: function(url, maxWidth, maxHeight, responsiveResize) {\r | |
21 | \r | |
22 | if (url.length < 1 || url.indexOf('http') < 0) {\r | |
23 | alert(editor.lang.oembed.invalidUrl);\r | |
24 | return false;\r | |
25 | }\r | |
26 | \r | |
27 | function embed() {\r | |
28 | if (maxWidth == null || maxWidth == 'undefined') {\r | |
29 | maxWidth = null;\r | |
30 | }\r | |
31 | \r | |
32 | if (maxHeight == null || maxHeight == 'undefined') {\r | |
33 | maxHeight = null;\r | |
34 | }\r | |
35 | \r | |
36 | if (responsiveResize == null || responsiveResize == 'undefined') {\r | |
37 | responsiveResize = false;\r | |
38 | }\r | |
39 | \r | |
40 | embedCode(url, editor, false, maxWidth, maxHeight, responsiveResize);\r | |
41 | }\r | |
42 | \r | |
43 | if (typeof(jQuery.fn.oembed) === 'undefined') {\r | |
44 | CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'), function() {\r | |
45 | embed();\r | |
46 | });\r | |
47 | } else {\r | |
48 | embed();\r | |
49 | }\r | |
50 | \r | |
51 | return true;\r | |
52 | }\r | |
53 | });\r | |
54 | \r | |
55 | editor.widgets.add('oembed', {\r | |
56 | draggable: false,\r | |
57 | mask: true,\r | |
58 | dialog: 'oembed',\r | |
59 | allowedContent: {\r | |
60 | div: {\r | |
61 | styles: 'text-align,float',\r | |
62 | attributes: '*',\r | |
63 | classes: editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent"\r | |
64 | },\r | |
65 | 'div(embeddedContent,oembed-provider-*) iframe': {\r | |
66 | attributes: '*'\r | |
67 | },\r | |
68 | 'div(embeddedContent,oembed-provider-*) blockquote': {\r | |
69 | attributes: '*'\r | |
70 | },\r | |
71 | 'div(embeddedContent,oembed-provider-*) script': {\r | |
72 | attributes: '*'\r | |
73 | }\r | |
74 | },\r | |
75 | template:\r | |
76 | '<div class="' + (editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent") + '">' +\r | |
77 | '</div>',\r | |
78 | upcast: function(element) {\r | |
79 | return element.name == 'div' && element.hasClass(editor.config.oembed_WrapperClass != null ? editor.config.oembed_WrapperClass : "embeddedContent");\r | |
80 | },\r | |
81 | init: function() {\r | |
82 | var data = {\r | |
83 | oembed: this.element.data('oembed') || '',\r | |
84 | resizeType: this.element.data('resizeType') || 'noresize',\r | |
85 | maxWidth: this.element.data('maxWidth') || 560,\r | |
86 | maxHeight: this.element.data('maxHeight') || 315,\r | |
87 | align: this.element.data('align') || 'none',\r | |
88 | oembed_provider: this.element.data('oembed_provider') || ''\r | |
89 | };\r | |
90 | \r | |
91 | this.setData(data);\r | |
92 | this.element.addClass('oembed-provider-' + data.oembed_provider);\r | |
93 | \r | |
94 | this.on('dialog', function(evt) {\r | |
95 | evt.data.widget = this;\r | |
96 | }, this);\r | |
97 | }\r | |
98 | });\r | |
99 | \r | |
100 | editor.ui.addButton('oembed', {\r | |
101 | label: editor.lang.oembed.button,\r | |
102 | command: 'oembed',\r | |
103 | toolbar: 'insert,10',\r | |
104 | icon: this.path + "icons/" + (CKEDITOR.env.hidpi ? "hidpi/" : "") + "oembed.png"\r | |
105 | });\r | |
106 | \r | |
107 | var resizeTypeChanged = function() {\r | |
108 | var dialog = this.getDialog(),\r | |
109 | resizetype = this.getValue(),\r | |
110 | maxSizeBox = dialog.getContentElement('general', 'maxSizeBox').getElement(),\r | |
111 | sizeBox = dialog.getContentElement('general', 'sizeBox').getElement();\r | |
112 | \r | |
113 | if (resizetype == 'noresize') {\r | |
114 | maxSizeBox.hide();\r | |
115 | \r | |
116 | sizeBox.hide();\r | |
117 | } else if (resizetype == "custom") {\r | |
118 | maxSizeBox.hide();\r | |
119 | \r | |
120 | sizeBox.show();\r | |
121 | } else {\r | |
122 | maxSizeBox.show();\r | |
123 | \r | |
124 | sizeBox.hide();\r | |
125 | }\r | |
126 | \r | |
127 | };\r | |
128 | \r | |
129 | String.prototype.beginsWith = function(string) {\r | |
130 | return (this.indexOf(string) === 0);\r | |
131 | };\r | |
132 | \r | |
133 | function loadjQueryLibaries() {\r | |
134 | if (typeof(jQuery) === 'undefined') {\r | |
135 | CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() {\r | |
136 | jQuery.noConflict();\r | |
137 | if (typeof(jQuery.fn.oembed) === 'undefined') {\r | |
138 | CKEDITOR.scriptLoader.load(\r | |
139 | CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js')\r | |
140 | );\r | |
141 | }\r | |
142 | });\r | |
143 | \r | |
144 | } else if (typeof(jQuery.fn.oembed) === 'undefined') {\r | |
145 | CKEDITOR.scriptLoader.load(CKEDITOR.getUrl(CKEDITOR.plugins.getPath('oembed') + 'libs/jquery.oembed.min.js'));\r | |
146 | }\r | |
147 | }\r | |
148 | \r | |
149 | function embedCode(url, instance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget) {\r | |
150 | jQuery('body').oembed(url, {\r | |
151 | onEmbed: function(e) {\r | |
152 | var elementAdded = false,\r | |
153 | provider = jQuery.fn.oembed.getOEmbedProvider(url);\r | |
154 | \r | |
155 | widget.element.data('resizeType', resizeType);\r | |
156 | if (resizeType == "responsive" || resizeType == "custom") {\r | |
157 | widget.element.data('maxWidth', maxWidth);\r | |
158 | widget.element.data('maxHeight', maxHeight);\r | |
159 | }\r | |
160 | \r | |
161 | widget.element.data('align', align);\r | |
162 | \r | |
163 | // TODO handle align\r | |
164 | if (align == 'center') {\r | |
165 | if (!widget.inline)\r | |
166 | widget.element.setStyle('text-align', 'center');\r | |
167 | \r | |
168 | widget.element.removeStyle('float');\r | |
169 | } else {\r | |
170 | if (!widget.inline)\r | |
171 | widget.element.removeStyle('text-align');\r | |
172 | \r | |
173 | if (align == 'none')\r | |
174 | widget.element.removeStyle('float');\r | |
175 | else\r | |
176 | widget.element.setStyle('float', align);\r | |
177 | }\r | |
178 | \r | |
179 | if (typeof e.code === 'string') {\r | |
180 | if (widget.element.$.firstChild) {\r | |
181 | widget.element.$.removeChild(widget.element.$.firstChild);\r | |
182 | }\r | |
183 | \r | |
184 | widget.element.appendHtml(e.code);\r | |
185 | widget.element.data('oembed', url);\r | |
186 | widget.element.data('oembed_provider', provider.name);\r | |
187 | widget.element.addClass('oembed-provider-' + provider.name);\r | |
188 | \r | |
189 | elementAdded = true;\r | |
190 | } else if (typeof e.code[0].outerHTML === 'string') {\r | |
191 | \r | |
192 | if (widget.element.$.firstChild) {\r | |
193 | widget.element.$.removeChild(widget.element.$.firstChild);\r | |
194 | }\r | |
195 | \r | |
196 | widget.element.appendHtml(e.code[0].outerHTML);\r | |
197 | widget.element.data('oembed', url);\r | |
198 | widget.element.data('oembed_provider', provider.name);\r | |
199 | widget.element.addClass('oembed-provider-' + provider.name);\r | |
200 | \r | |
201 | elementAdded = true;\r | |
202 | } else {\r | |
203 | alert(editor.lang.oembed.noEmbedCode);\r | |
204 | }\r | |
205 | },\r | |
206 | onError: function(externalUrl) {\r | |
207 | if (externalUrl.indexOf("vimeo.com") > 0) {\r | |
208 | alert(editor.lang.oembed.noVimeo);\r | |
209 | } else {\r | |
210 | alert(editor.lang.oembed.Error);\r | |
211 | }\r | |
212 | \r | |
213 | },\r | |
214 | maxHeight: maxHeight,\r | |
215 | maxWidth: maxWidth,\r | |
216 | useResponsiveResize: responsiveResize,\r | |
217 | embedMethod: 'editor'\r | |
218 | });\r | |
219 | }\r | |
220 | \r | |
221 | CKEDITOR.dialog.add('oembed', function(editor) {\r | |
222 | return {\r | |
223 | title: editor.lang.oembed.title,\r | |
224 | minWidth: CKEDITOR.env.ie && CKEDITOR.env.quirks ? 568 : 550,\r | |
225 | minHeight: 155,\r | |
226 | onShow: function() {\r | |
227 | var data = {\r | |
228 | oembed: this.widget.element.data('oembed') || '',\r | |
229 | resizeType: this.widget.element.data('resizeType') || 'noresize',\r | |
230 | maxWidth: this.widget.element.data('maxWidth'),\r | |
231 | maxHeight: this.widget.element.data('maxHeight'),\r | |
232 | align: this.widget.element.data('align') || 'none'\r | |
233 | };\r | |
234 | \r | |
235 | this.widget.setData(data);\r | |
236 | \r | |
237 | this.getContentElement('general', 'resizeType').setValue(data.resizeType);\r | |
238 | \r | |
239 | this.getContentElement('general', 'align').setValue(data.align);\r | |
240 | \r | |
241 | var resizetype = this.getContentElement('general', 'resizeType').getValue(),\r | |
242 | maxSizeBox = this.getContentElement('general', 'maxSizeBox').getElement(),\r | |
243 | sizeBox = this.getContentElement('general', 'sizeBox').getElement();\r | |
244 | \r | |
245 | if (resizetype == 'noresize') {\r | |
246 | maxSizeBox.hide();\r | |
247 | sizeBox.hide();\r | |
248 | } else if (resizetype == "custom") {\r | |
249 | maxSizeBox.hide();\r | |
250 | \r | |
251 | sizeBox.show();\r | |
252 | } else {\r | |
253 | maxSizeBox.show();\r | |
254 | \r | |
255 | sizeBox.hide();\r | |
256 | }\r | |
257 | },\r | |
258 | \r | |
259 | onOk: function() {\r | |
260 | },\r | |
261 | contents: [\r | |
262 | {\r | |
263 | label: editor.lang.common.generalTab,\r | |
264 | id: 'general',\r | |
265 | elements: [\r | |
266 | {\r | |
267 | type: 'html',\r | |
268 | id: 'oembedHeader',\r | |
269 | html: '<div style="white-space:normal;width:500px;padding-bottom:10px">' + editor.lang.oembed.pasteUrl + '</div>'\r | |
270 | }, {\r | |
271 | type: 'text',\r | |
272 | id: 'embedCode',\r | |
273 | focus: function() {\r | |
274 | this.getElement().focus();\r | |
275 | },\r | |
276 | label: editor.lang.oembed.url,\r | |
277 | title: editor.lang.oembed.pasteUrl,\r | |
278 | setup: function(widget) {\r | |
279 | if (widget.data.oembed) {\r | |
280 | this.setValue(widget.data.oembed);\r | |
281 | }\r | |
282 | },\r | |
283 | commit: function(widget) {\r | |
284 | var dialog = CKEDITOR.dialog.getCurrent(),\r | |
285 | inputCode = dialog.getValueOf('general', 'embedCode').replace(/\s/g, ""),\r | |
286 | resizeType = dialog.getContentElement('general', 'resizeType').\r | |
287 | getValue(),\r | |
288 | align = dialog.getContentElement('general', 'align').\r | |
289 | getValue(),\r | |
290 | maxWidth = null,\r | |
291 | maxHeight = null,\r | |
292 | responsiveResize = false,\r | |
293 | editorInstance = dialog.getParentEditor();\r | |
294 | \r | |
295 | if (inputCode.length < 1 || inputCode.indexOf('http') < 0) {\r | |
296 | alert(editor.lang.oembed.invalidUrl);\r | |
297 | return false;\r | |
298 | }\r | |
299 | \r | |
300 | if (resizeType == "noresize") {\r | |
301 | responsiveResize = false;\r | |
302 | maxWidth = null;\r | |
303 | maxHeight = null;\r | |
304 | } else if (resizeType == "responsive") {\r | |
305 | maxWidth = dialog.getContentElement('general', 'maxWidth').\r | |
306 | getInputElement().\r | |
307 | getValue();\r | |
308 | maxHeight = dialog.getContentElement('general', 'maxHeight').\r | |
309 | getInputElement().\r | |
310 | getValue();\r | |
311 | \r | |
312 | responsiveResize = true;\r | |
313 | } else if (resizeType == "custom") {\r | |
314 | maxWidth = dialog.getContentElement('general', 'width').\r | |
315 | getInputElement().\r | |
316 | getValue();\r | |
317 | maxHeight = dialog.getContentElement('general', 'height').\r | |
318 | getInputElement().\r | |
319 | getValue();\r | |
320 | \r | |
321 | responsiveResize = false;\r | |
322 | }\r | |
323 | \r | |
324 | embedCode(inputCode, editorInstance, maxWidth, maxHeight, responsiveResize, resizeType, align, widget);\r | |
325 | \r | |
326 | widget.setData('oembed', inputCode);\r | |
327 | widget.setData('resizeType', resizeType);\r | |
328 | widget.setData('align', align);\r | |
329 | widget.setData('maxWidth', maxWidth);\r | |
330 | widget.setData('maxHeight', maxHeight);\r | |
331 | }\r | |
332 | }, {\r | |
333 | type: 'hbox',\r | |
334 | widths: ['50%', '50%'],\r | |
335 | children: [\r | |
336 | {\r | |
337 | id: 'resizeType',\r | |
338 | type: 'select',\r | |
339 | label: editor.lang.oembed.resizeType,\r | |
340 | 'default': 'noresize',\r | |
341 | setup: function(widget) {\r | |
342 | if (widget.data.resizeType) {\r | |
343 | this.setValue(widget.data.resizeType);\r | |
344 | }\r | |
345 | },\r | |
346 | items: [\r | |
347 | [editor.lang.oembed.noresize, 'noresize'],\r | |
348 | [editor.lang.oembed.responsive, 'responsive'],\r | |
349 | [editor.lang.oembed.custom, 'custom']\r | |
350 | ],\r | |
351 | onChange: resizeTypeChanged\r | |
352 | }, {\r | |
353 | type: 'hbox',\r | |
354 | id: 'maxSizeBox',\r | |
355 | widths: ['120px', '120px'],\r | |
356 | style: 'float:left;position:absolute;left:58%;width:200px',\r | |
357 | children: [\r | |
358 | {\r | |
359 | type: 'text',\r | |
360 | width: '100px',\r | |
361 | id: 'maxWidth',\r | |
362 | 'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',\r | |
363 | label: editor.lang.oembed.maxWidth,\r | |
364 | title: editor.lang.oembed.maxWidthTitle,\r | |
365 | setup: function(widget) {\r | |
366 | if (widget.data.maxWidth) {\r | |
367 | this.setValue(widget.data.maxWidth);\r | |
368 | }\r | |
369 | }\r | |
370 | }, {\r | |
371 | type: 'text',\r | |
372 | id: 'maxHeight',\r | |
373 | width: '120px',\r | |
374 | 'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',\r | |
375 | label: editor.lang.oembed.maxHeight,\r | |
376 | title: editor.lang.oembed.maxHeightTitle,\r | |
377 | setup: function(widget) {\r | |
378 | if (widget.data.maxHeight) {\r | |
379 | this.setValue(widget.data.maxHeight);\r | |
380 | }\r | |
381 | }\r | |
382 | }\r | |
383 | ]\r | |
384 | }, {\r | |
385 | type: 'hbox',\r | |
386 | id: 'sizeBox',\r | |
387 | widths: ['120px', '120px'],\r | |
388 | style: 'float:left;position:absolute;left:58%;width:200px',\r | |
389 | children: [\r | |
390 | {\r | |
391 | type: 'text',\r | |
392 | id: 'width',\r | |
393 | width: '100px',\r | |
394 | 'default': editor.config.oembed_maxWidth != null ? editor.config.oembed_maxWidth : '560',\r | |
395 | label: editor.lang.oembed.width,\r | |
396 | title: editor.lang.oembed.widthTitle,\r | |
397 | setup: function(widget) {\r | |
398 | if (widget.data.maxWidth) {\r | |
399 | this.setValue(widget.data.maxWidth);\r | |
400 | }\r | |
401 | }\r | |
402 | }, {\r | |
403 | type: 'text',\r | |
404 | id: 'height',\r | |
405 | width: '120px',\r | |
406 | 'default': editor.config.oembed_maxHeight != null ? editor.config.oembed_maxHeight : '315',\r | |
407 | label: editor.lang.oembed.height,\r | |
408 | title: editor.lang.oembed.heightTitle,\r | |
409 | setup: function(widget) {\r | |
410 | if (widget.data.maxHeight) {\r | |
411 | this.setValue(widget.data.maxHeight);\r | |
412 | }\r | |
413 | }\r | |
414 | }\r | |
415 | ]\r | |
416 | }\r | |
417 | ]\r | |
418 | }, {\r | |
419 | type: 'hbox',\r | |
420 | id: 'alignment',\r | |
421 | children: [\r | |
422 | {\r | |
423 | id: 'align',\r | |
424 | type: 'radio',\r | |
425 | items: [\r | |
426 | [editor.lang.oembed.none, 'none'],\r | |
427 | [editor.lang.common.alignLeft, 'left'],\r | |
428 | [editor.lang.common.alignCenter, 'center'],\r | |
429 | [editor.lang.common.alignRight, 'right']\r | |
430 | ],\r | |
431 | label: editor.lang.common.align,\r | |
432 | setup: function(widget) {\r | |
433 | this.setValue(widget.data.align);\r | |
434 | }\r | |
435 | }\r | |
436 | ]\r | |
437 | }\r | |
438 | ]\r | |
439 | }\r | |
440 | ]\r | |
441 | };\r | |
442 | });\r | |
443 | }\r | |
444 | });\r | |
445 | }\r | |
446 | )();\r |