]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blob - sources/plugins/html5video/plugin.js
1bfff7f9b518c6236b3354d3335318b54ad4b463
1 CKEDITOR
.plugins
.add( 'html5video', {
3 lang: 'de,en,eu,es,ru,uk,fr',
5 init: function( editor
) {
6 editor
.widgets
.add( 'html5video', {
7 button: editor
.lang
.html5video
.button
,
8 template: '<div class="ckeditor-html5-video"></div>',
10 * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
11 * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.
12 * - video tags with src and controls attributes.
14 allowedContent: 'div(!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay];',
15 requiredContent: 'div(ckeditor-html5-video); video[src,controls];',
16 upcast: function( element
) {
17 return element
.name
=== 'div' && element
.hasClass( 'ckeditor-html5-video' );
23 var align
= this.element
.getStyle( 'text-align' );
28 // If there's a child (the video element)
29 if ( this.element
.getChild( 0 ) ) {
30 // get it's attributes.
31 src
= this.element
.getChild( 0 ).getAttribute( 'src' );
32 width
= this.element
.getChild( 0 ).getAttribute( 'width' );
33 height
= this.element
.getChild( 0 ).getAttribute( 'height' );
34 autoplay
= this.element
.getChild( 0 ).getAttribute( 'autoplay' );
38 this.setData( 'src', src
);
41 this.setData( 'align', align
);
43 this.setData( 'align', 'none' );
47 this.setData( 'width', width
);
49 this.setData( 'width', '400' );
53 this.setData( 'height', height
);
55 this.setData( 'height', '300' );
59 this.setData( 'autoplay', 'yes' );
64 // If there is an video source
65 if ( this.data
.src
) {
66 // and there isn't a child (the video element)
67 if ( !this.element
.getChild( 0 ) ) {
68 // Create a new <video> element.
69 var videoElement
= new CKEDITOR
.dom
.element( 'video' );
70 // Set the controls attribute.
71 videoElement
.setAttribute( 'controls', 'controls' );
72 // Append it to the container of the plugin.
73 this.element
.append( videoElement
);
75 this.element
.getChild( 0 ).setAttribute( 'src', this.data
.src
)
76 .setAttribute( 'width', this.data
.width
)
77 .setAttribute( 'height', this.data
.height
);
80 this.element
.removeStyle( 'float' );
81 this.element
.removeStyle( 'margin-left' );
82 this.element
.removeStyle( 'margin-right' );
84 if ( this.data
.align
=== 'none' ) {
85 this.element
.removeStyle( 'text-align' );
87 this.element
.setStyle( 'text-align', this.data
.align
);
90 if ( this.data
.align
=== 'left' ) {
91 this.element
.setStyle( 'float', this.data
.align
);
92 this.element
.setStyle( 'margin-right', '10px' );
93 } else if ( this.data
.align
=== 'right' ) {
94 this.element
.setStyle( 'float', this.data
.align
);
95 this.element
.setStyle( 'margin-left', '10px' );
98 if ( this.element
.getChild( 0 ) ) {
99 if ( this.data
.autoplay
=== 'yes' ) {
100 this.element
.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );
102 this.element
.getChild( 0 ).removeAttribute( 'autoplay' );
108 if ( editor
.contextMenu
) {
109 editor
.addMenuGroup( 'html5videoGroup' );
110 editor
.addMenuItem( 'html5videoPropertiesItem', {
111 label: editor
.lang
.html5video
.videoProperties
,
113 command: 'html5video',
114 group: 'html5videoGroup'
117 editor
.contextMenu
.addListener( function( element
) {
119 element
.getChild( 0 ) &&
120 element
.getChild( 0 ).hasClass
&&
121 element
.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {
122 return { html5videoPropertiesItem: CKEDITOR
.TRISTATE_OFF
};
127 CKEDITOR
.dialog
.add( 'html5video', this.path
+ 'dialogs/html5video.js' );