1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
/***
* Bootstrap 4 Embed Media Dialog for ckEditor 4 based on Fabian Vogelsteller's Embed Media Dialog on https://github.com/frozeman/MediaEmbed
*
* Wrap any embed like an <iframe> in a parent element with .embed-responsive and an aspect ratio.
* The plugin allows you to insert multiple iframes at the same time, managed as separate elements.
* Bootstrap classes for responsive embed are applied only to iframe, video, embed and object tags.
* The other tags are not modified in any way.
*
* Plugin name: bootstrapMediaEmbed
* Menu button name: BootstrapMediaEmbed
*
* Youtube Editor Icon
* http://paulrobertlloyd.com/
*
* @author Domenico Gigante [reloadlab.it]
* @version 1.0
***/
(function() {
CKEDITOR.plugins.add('bootstrapMediaEmbed',
{
icons: 'bootstrapmediaembed', // %REMOVE_LINE_CORE%
hidpi: true, // %REMOVE_LINE_CORE%
lang: 'en,it',
init: function(editor) {
// Bootstrap Embedable element
var embedable = [
'iframe',
'embed',
'video',
'object'
];
// Bootstrap embed responsive ratio
var ratio = [
'embed-responsive-21by9',
'embed-responsive-16by9',
'embed-responsive-4by3',
'embed-responsive-1by1'
];
var me = this;
CKEDITOR.dialog.add('BootstrapMediaEmbedDialog', function(instance) {
return {
title: editor.lang.bootstrapMediaEmbed.dialogTitle,
minWidth: 550,
minHeight: 200,
contents: [
{
id: 'iframe',
expand: true,
elements: [
{
id: 'embedArea',
type: 'textarea',
label: editor.lang.bootstrapMediaEmbed.dialogArea,
'autofocus': 'autofocus',
setup: function(element) {
},
commit: function(element) {
}
},
{
id: 'selectRatio',
type: 'select',
label: editor.lang.bootstrapMediaEmbed.dialogRatio,
items: [
[editor.lang.bootstrapMediaEmbed.selectRatio[0], 'none'],
[editor.lang.bootstrapMediaEmbed.selectRatio[1], 0],
[editor.lang.bootstrapMediaEmbed.selectRatio[2], 1],
[editor.lang.bootstrapMediaEmbed.selectRatio[3], 2],
[editor.lang.bootstrapMediaEmbed.selectRatio[4], 3]
],
'default': 'none'
}
]
}
],
onOk: function() {
// Embed Textarea value
var ea = this.getContentElement('iframe', 'embedArea').getValue();
// Responsive Ratio Select value
var rr = this.getContentElement('iframe', 'selectRatio').getValue();
if (ea && ea.trim() != '') {
// Temporary div container
var tmp = instance.document.createElement('div');
tmp.setHtml(ea);
// Elements to insert in Editor
var ch = tmp.getChildren();
var elem;
while (elem = ch.getItem(0)) {
// Node name equal to iframe, video, embed or object
if (embedable.indexOf(elem.getName()) != -1) {
// Container div
var div = instance.document.createElement('div');
// Add Bootstrap's css class for responsive design
if (ratio[rr]) {
div.setAttribute('class', 'embed-responsive ' + ratio[rr]);
elem.setAttribute('class', 'embed-responsive-item');
}
// Append element to container
div.append(elem);
// Insert into Editor
instance.insertElement(div);
}
// None of embedable elements
else {
// Container div
var div = instance.document.createElement('div');
// Append element to container
div.append(elem);
// Insert into Editor
instance.insertElement(div);
}
}
// Remove temporary div to free memory
tmp.remove();
}
}
};
});
editor.addCommand('BootstrapMediaEmbed',
new CKEDITOR.dialogCommand('BootstrapMediaEmbedDialog',
{
allowedContent: 'iframe[*],video[*],audio[*],source[*],embed[*],object[*]'
}
)
);
editor.ui.addButton('BootstrapMediaEmbed',
{
label: editor.lang.bootstrapMediaEmbed.toolbar,
command: 'BootstrapMediaEmbed',
toolbar: 'bootstrapMediaEmbed'
}
);
}
});
})();
|
