1 |
2
|
Manuela
|
/**
|
2 |
|
|
* @license Copyright (c) 2003-2014, Clemens Krack. All rights reserved.
|
3 |
|
|
* @author Clemens Krack <info@clemenskrack.com>
|
4 |
|
|
* For licensing, see LICENSE.md or http://ckeditor.com/license
|
5 |
|
|
*/
|
6 |
|
|
|
7 |
|
|
'use strict';
|
8 |
|
|
|
9 |
|
|
( function() {
|
10 |
|
|
CKEDITOR.plugins.add( 'imageresponsive', {
|
11 |
|
|
lang: 'en,de',
|
12 |
|
|
requires: 'widget,dialog,image2',
|
13 |
|
|
beforeInit: function(editor) {
|
14 |
|
|
editor.on('widgetDefinition', function(e) {
|
15 |
|
|
var widget = e.data;
|
16 |
|
|
// figure out if this is the image dialog.
|
17 |
|
|
if(widget.name != 'image')
|
18 |
|
|
return;
|
19 |
|
|
|
20 |
|
|
// should not happen but anyway...
|
21 |
|
|
if(!widget.allowedContent.img || !widget.allowedContent.img.attributes)
|
22 |
|
|
return;
|
23 |
|
|
|
24 |
|
|
if(widget.allowedContent.img.attributes.indexOf('srcset') == -1)
|
25 |
|
|
widget.allowedContent.img.attributes += ',srcset'
|
26 |
|
|
if(widget.allowedContent.img.attributes.indexOf('sizes') == -1)
|
27 |
|
|
widget.allowedContent.img.attributes += ',sizes'
|
28 |
|
|
});
|
29 |
|
|
},
|
30 |
|
|
init: function(editor) {
|
31 |
|
|
// bind to widget#instanceCreated so we can see when the image widget is about to be initiated
|
32 |
|
|
editor.widgets.on('instanceCreated', function(e) {
|
33 |
|
|
var widget = e.data;
|
34 |
|
|
|
35 |
|
|
// figure out if this is the image dialog.
|
36 |
|
|
if(widget.name != 'image')
|
37 |
|
|
return;
|
38 |
|
|
|
39 |
|
|
// register handler for data
|
40 |
|
|
widget.on('data', function(e) {
|
41 |
|
|
widget = e.data;
|
42 |
|
|
// keep srcset & sizes attributes only when set.
|
43 |
|
|
if(widget.srcset)
|
44 |
|
|
e.sender.parts.image.setAttribute('srcset', widget.srcset);
|
45 |
|
|
else
|
46 |
|
|
e.sender.parts.image.removeAttribute('srcset');
|
47 |
|
|
|
48 |
|
|
if(widget.sizes)
|
49 |
|
|
e.sender.parts.image.setAttribute('sizes', widget.sizes);
|
50 |
|
|
else
|
51 |
|
|
e.sender.parts.image.removeAttribute('sizes');
|
52 |
|
|
});
|
53 |
|
|
|
54 |
|
|
// set data from existing variables.
|
55 |
|
|
var image = widget.element;
|
56 |
|
|
|
57 |
|
|
// since the img-tag can be wrapped with a caption, make sure we use the right element.
|
58 |
|
|
if(image.getName() != 'img')
|
59 |
|
|
image = image.findOne('img');
|
60 |
|
|
|
61 |
|
|
var data = {
|
62 |
|
|
srcset: image.getAttribute( 'srcset' ) || '',
|
63 |
|
|
sizes: image.getAttribute( 'sizes' ) || ''
|
64 |
|
|
};
|
65 |
|
|
widget.setData(data);
|
66 |
|
|
});
|
67 |
|
|
|
68 |
|
|
CKEDITOR.on('dialogDefinition', function(e) {
|
69 |
|
|
// make sure this is the right editor (there can be more on one page) and the right dialog.
|
70 |
|
|
if ((e.editor != editor) || (e.data.name != 'image2'))
|
71 |
|
|
return;
|
72 |
|
|
|
73 |
|
|
// Get a reference to the "Link Info" tab.
|
74 |
|
|
var infoTab = e.data.definition.getContents( 'info' );
|
75 |
|
|
|
76 |
|
|
// Add text fields for srcset and sizes.
|
77 |
|
|
infoTab.add({
|
78 |
|
|
id: 'srcset',
|
79 |
|
|
type: 'text',
|
80 |
|
|
requiredContent: 'img[srcset]',
|
81 |
|
|
label: e.editor.lang.imageresponsive.srcset,
|
82 |
|
|
setup: function(widget) {
|
83 |
|
|
this.setValue(widget.data.srcset);
|
84 |
|
|
},
|
85 |
|
|
commit: function (widget) {
|
86 |
|
|
widget.setData('srcset', this.getValue());
|
87 |
|
|
}
|
88 |
|
|
}, 'alt');
|
89 |
|
|
|
90 |
|
|
infoTab.add({
|
91 |
|
|
id: 'sizes',
|
92 |
|
|
type: 'text',
|
93 |
|
|
requiredContent: 'img[sizes]',
|
94 |
|
|
label: e.editor.lang.imageresponsive.sizes,
|
95 |
|
|
setup: function(widget) {
|
96 |
|
|
this.setValue(widget.data.sizes);
|
97 |
|
|
},
|
98 |
|
|
commit: function (widget) {
|
99 |
|
|
widget.setData('sizes', this.getValue());
|
100 |
|
|
}
|
101 |
|
|
}, 'alignment');
|
102 |
|
|
});
|
103 |
|
|
}
|
104 |
|
|
});
|
105 |
|
|
} )();
|