CKEDITOR.plugins.add( 'html5video', { requires: 'widget', lang: 'bg,ca,de,en,eu,es,ru,uk,fr,ko,pt,pt-br,pl', 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, controls, width and height attributes. */ allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,poster,controls,autoplay,width, height,loop]{max-width,height};', requiredContent: 'div(ckeditor-html5-video); video[src];', upcast: function( element ) { return element.name === 'div' && element.hasClass( 'ckeditor-html5-video' ); }, dialog: 'html5video', init: function() { var src = ''; var autoplay = ''; var loop = ''; var controls = ''; var align = this.element.getStyle( 'text-align' ); var width = ''; var height = ''; var poster = ''; // 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'); allowdownload = !this.element.getChild( 0 ).getAttribute( 'controlslist' ); loop = this.element.getChild( 0 ).getAttribute( 'loop' ); advisorytitle = this.element.getChild( 0 ).getAttribute( 'title' ); controls = this.element.getChild(0).getAttribute('controls'); responsive = this.element.getAttribute( 'data-responsive' ); poster = this.element.getChild( 0 ).getAttribute( 'poster' ); } if ( src ) { this.setData( 'src', src ); if ( align ) { this.setData( 'align', align ); } else { this.setData( 'align', 'none' ); } if ( width ) { this.setData( 'width', width ); } if ( height ) { this.setData( 'height', height ); } if ( autoplay ) { this.setData( 'autoplay', 'yes' ); } if ( allowdownload ) { this.setData( 'allowdownload', 'yes' ); } if ( loop ) { this.setData( 'loop', 'yes' ); } if ( advisorytitle ) { this.setData( 'advisorytitle', advisorytitle ); } if ( responsive ) { this.setData( 'responsive', responsive ); } if (controls) { this.setData('controls', controls); } if ( poster ) { this.setData('poster', poster); } } }, 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. if (this.data.controls) { 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 ); if (this.data.width) this.element.getChild( 0 ).setAttribute( 'width', this.data.width ); if (this.data.height) this.element.getChild( 0 ).setAttribute( 'height', this.data.height ); if ( this.data.responsive ) { this.element.setAttribute("data-responsive", this.data.responsive); this.element.getChild( 0 ).setStyle( 'max-width', '100%' ); this.element.getChild( 0 ).setStyle( 'height', 'auto' ); } else { this.element.removeAttribute("data-responsive"); this.element.getChild( 0 ).removeStyle( 'max-width' ); this.element.getChild( 0 ).removeStyle( 'height' ); } if (this.data.poster) this.element.getChild( 0 ).setAttribute('poster', this.data.poster); } 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 ( this.data.loop === 'yes' ) { this.element.getChild( 0 ).setAttribute( 'loop', 'loop' ); } else { this.element.getChild( 0 ).removeAttribute( 'loop' ); } if ( this.data.allowdownload === 'yes' ) { this.element.getChild( 0 ).removeAttribute( 'controlslist' ); } else { this.element.getChild( 0 ).setAttribute( 'controlslist', 'nodownload' ); } if ( this.data.advisorytitle ) { this.element.getChild( 0 ).setAttribute( 'title', this.data.advisorytitle ); } else { this.element.getChild( 0 ).removeAttribute( 'title' ); } if (this.data.controls) { this.element.getChild(0).setAttribute('controls', 'controls'); } else { this.element.getChild(0).removeAttribute('controls'); } } } } ); 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' ); } } );