]>
git.immae.eu Git - perso/Immae/Projets/packagist/piedsjaloux-ckeditor-component.git/blob - sources/plugins/html5video/plugin.js
bf512852da7d389a8516a1de920e3c91b8236527
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, controls, width and height attributes.
14 allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,controls,autoplay,width, height]{max-width,height};',
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' );
35 responsive
= this.element
.getAttribute( 'data-responsive' );
39 this.setData( 'src', src
);
42 this.setData( 'align', align
);
44 this.setData( 'align', 'none' );
48 this.setData( 'width', width
);
52 this.setData( 'height', height
);
56 this.setData( 'autoplay', 'yes' );
60 this.setData( 'responsive', responsive
);
65 // If there is an video source
66 if ( this.data
.src
) {
67 // and there isn't a child (the video element)
68 if ( !this.element
.getChild( 0 ) ) {
69 // Create a new <video> element.
70 var videoElement
= new CKEDITOR
.dom
.element( 'video' );
71 // Set the controls attribute.
72 videoElement
.setAttribute( 'controls', 'controls' );
73 // Append it to the container of the plugin.
74 this.element
.append( videoElement
);
76 this.element
.getChild( 0 ).setAttribute( 'src', this.data
.src
);
77 if (this.data
.width
) this.element
.getChild( 0 ).setAttribute( 'width', this.data
.width
);
78 if (this.data
.height
) this.element
.getChild( 0 ).setAttribute( 'height', this.data
.height
);
80 if ( this.data
.responsive
) {
81 this.element
.setAttribute("data-responsive", this.data
.responsive
);
82 this.element
.getChild( 0 ).setStyle( 'max-width', '100%' );
83 this.element
.getChild( 0 ).setStyle( 'height', 'auto' );
85 this.element
.getChild( 0 ).removeStyle( 'max-width' );
86 this.element
.getChild( 0 ).removeStyle( 'height' );
90 this.element
.removeStyle( 'float' );
91 this.element
.removeStyle( 'margin-left' );
92 this.element
.removeStyle( 'margin-right' );
94 if ( this.data
.align
=== 'none' ) {
95 this.element
.removeStyle( 'text-align' );
97 this.element
.setStyle( 'text-align', this.data
.align
);
100 if ( this.data
.align
=== 'left' ) {
101 this.element
.setStyle( 'float', this.data
.align
);
102 this.element
.setStyle( 'margin-right', '10px' );
103 } else if ( this.data
.align
=== 'right' ) {
104 this.element
.setStyle( 'float', this.data
.align
);
105 this.element
.setStyle( 'margin-left', '10px' );
108 if ( this.element
.getChild( 0 ) ) {
109 if ( this.data
.autoplay
=== 'yes' ) {
110 this.element
.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );
112 this.element
.getChild( 0 ).removeAttribute( 'autoplay' );
118 if ( editor
.contextMenu
) {
119 editor
.addMenuGroup( 'html5videoGroup' );
120 editor
.addMenuItem( 'html5videoPropertiesItem', {
121 label: editor
.lang
.html5video
.videoProperties
,
123 command: 'html5video',
124 group: 'html5videoGroup'
127 editor
.contextMenu
.addListener( function( element
) {
129 element
.getChild( 0 ) &&
130 element
.getChild( 0 ).hasClass
&&
131 element
.getChild( 0 ).hasClass( 'ckeditor-html5-video' ) ) {
132 return { html5videoPropertiesItem: CKEDITOR
.TRISTATE_OFF
};
137 CKEDITOR
.dialog
.add( 'html5video', this.path
+ 'dialogs/html5video.js' );