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
|
CKEDITOR.plugins.add( 'html5video', {
requires: 'widget',
lang: 'de,en,eu,es,ru,uk,fr',
icons: 'html5video',
init: function( editor ) {
editor.widgets.add( 'html5video', {
button: editor.lang.html5video.button,
template: '<div class="ckeditor-html5-video"></div>',
/*
* Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
* - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.
* - video tags with src and controls attributes.
*/
allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];',
requiredContent: 'div(ckeditor-html5-video); video[src,controls];',
upcast: function( element ) {
return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' );
},
dialog: 'html5video',
init: function() {
var src = '';
var autoplay = '';
var align = this.element.getStyle( 'text-align' );
var width = '';
var height = '';
// If there's a child (the video element)
if ( this.element.getChild( 0 ) ) {
// get it's attributes.
src = this.element.getChild( 0 ).getAttribute( 'src' );
width = this.element.getChild( 0 ).getAttribute( 'width' );
height = this.element.getChild( 0 ).getAttribute( 'height' );
autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );
}
if ( src ) {
this.setData( 'src', src );
if ( align ) {
this.setData( 'align', align );
} else {
this.setData( 'align', 'none' );
}
if ( width ) {
this.setData( 'width', width );
} else {
this.setData( 'width', '400' );
}
if ( height ) {
this.setData( 'height', height );
} else {
this.setData( 'height', '300' );
}
if ( autoplay ) {
this.setData( 'autoplay', 'yes' );
}
}
},
data: function() {
// If there is an video source
if ( this.data.src ) {
// and there isn't a child (the video element)
if ( !this.element.getChild( 0 ) ) {
// Create a new <video> element.
var videoElement = new CKEDITOR.dom.element( 'video' );
// Set the controls attribute.
videoElement.setAttribute( 'controls', 'controls' );
// Append it to the container of the plugin.
this.element.append( videoElement );
}
this.element.getChild( 0 ).setAttribute( 'src', this.data.src )
.setAttribute( 'width', this.data.width )
.setAttribute( 'height', this.data.height );
}
this.element.removeStyle( 'float' );
this.element.removeStyle( 'margin-left' );
this.element.removeStyle( 'margin-right' );
if ( this.data.align === 'none' ) {
this.element.removeStyle( 'text-align' );
} else {
this.element.setStyle( 'text-align', this.data.align );
}
if ( this.data.align === 'left' ) {
this.element.setStyle( 'float', this.data.align );
this.element.setStyle( 'margin-right', '10px' );
} else if ( this.data.align === 'right' ) {
this.element.setStyle( 'float', this.data.align );
this.element.setStyle( 'margin-left', '10px' );
}
if ( this.element.getChild( 0 ) ) {
if ( this.data.autoplay === 'yes' ) {
this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );
} else {
this.element.getChild( 0 ).removeAttribute( 'autoplay' );
}
}
}
} );
if ( editor.contextMenu ) {
editor.addMenuGroup( 'html5videoGroup' );
editor.addMenuItem( 'html5videoPropertiesItem', {
label: editor.lang.html5video.videoProperties,
icon: 'html5video',
command: 'html5video',
group: 'html5videoGroup'
});
editor.contextMenu.addListener( function( element ) {
if ( element &&
element.getChild( 0 ) &&
element.getChild( 0 ).hasClass &&
element.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {
return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };
}
});
}
CKEDITOR.dialog.add( 'html5video', this.path + 'dialogs/html5video.js' );
}
} );
|
