--- /dev/null
+CKEDITOR.plugins.add( 'html5audio', {\r
+ requires: 'widget',\r
+ lang: 'de,el,en,eu,es,fr,ru,uk,uz,zh-cn',\r
+ icons: 'html5audio',\r
+ init: function( editor ) {\r
+ editor.widgets.add( 'html5audio', {\r
+ button: editor.lang.html5audio.button,\r
+ template: '<div class="ckeditor-html5-audio"></div>', // We add the audio element when needed in the data function, to avoid having an undefined src attribute.\r
+ // See issue #9 on github: https://github.com/iametza/ckeditor-html5-audio/issues/9\r
+ editables: {},\r
+ /*\r
+ * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):\r
+ * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-audio class.\r
+ * - audio tags with src and controls attributes.\r
+ */\r
+ allowedContent: 'div(!ckeditor-html5-audio){text-align,float,margin-left,margin-right}; audio[src,controls,controlslist,autoplay];',\r
+ requiredContent: 'div(ckeditor-html5-audio); audio[src,controls];',\r
+ upcast: function( element ) {\r
+ return element.name === 'div' && element.hasClass( 'ckeditor-html5-audio' );\r
+ },\r
+ dialog: 'html5audio',\r
+ init: function() {\r
+ var src = '';\r
+ var autoplay = '';\r
+ var align = this.element.getStyle( 'text-align' );\r
+\r
+ // If there's a child (the audio element)\r
+ if ( this.element.getChild( 0 ) ) {\r
+ // get it's attributes.\r
+ src = this.element.getChild( 0 ).getAttribute( 'src' );\r
+ autoplay = this.element.getChild( 0 ).getAttribute( 'autoplay' );\r
+ allowdownload = !this.element.getChild( 0 ).getAttribute( 'controlslist' );\r
+ }\r
+\r
+ if ( src ) {\r
+ this.setData( 'src', src );\r
+\r
+ if ( align ) {\r
+ this.setData( 'align', align );\r
+ } else {\r
+ this.setData( 'align', 'none' );\r
+ }\r
+\r
+ if ( autoplay ) {\r
+ this.setData( 'autoplay', 'yes' );\r
+ }\r
+\r
+ if ( allowdownload ) {\r
+ this.setData( 'allowdownload', 'yes' );\r
+ }\r
+ }\r
+ },\r
+ data: function() {\r
+ // If there is an audio source\r
+ if ( this.data.src ) {\r
+ // and there isn't a child (the audio element)\r
+ if ( !this.element.getChild( 0 ) ) {\r
+ // Create a new <audio> element.\r
+ var audioElement = new CKEDITOR.dom.element( 'audio' );\r
+ // Set the controls attribute.\r
+ audioElement.setAttribute( 'controls', 'controls' );\r
+ // Append it to the container of the plugin.\r
+ this.element.append( audioElement );\r
+ }\r
+ this.element.getChild( 0 ).setAttribute( 'src', this.data.src );\r
+ }\r
+\r
+ this.element.removeStyle( 'float' );\r
+ this.element.removeStyle( 'margin-left' );\r
+ this.element.removeStyle( 'margin-right' );\r
+\r
+ if ( this.data.align === 'none' ) {\r
+ this.element.removeStyle( 'text-align' );\r
+ } else {\r
+ this.element.setStyle( 'text-align', this.data.align );\r
+ }\r
+\r
+ if ( this.data.align === 'left' ) {\r
+ this.element.setStyle( 'float', this.data.align );\r
+ this.element.setStyle( 'margin-right', '10px' );\r
+ } else if ( this.data.align === 'right' ) {\r
+ this.element.setStyle( 'float', this.data.align );\r
+ this.element.setStyle( 'margin-left', '10px' );\r
+ }\r
+\r
+ if ( this.element.getChild( 0 ) ) {\r
+ if ( this.data.autoplay === 'yes' ) {\r
+ this.element.getChild( 0 ).setAttribute( 'autoplay', 'autoplay' );\r
+ } else {\r
+ this.element.getChild( 0 ).removeAttribute( 'autoplay' );\r
+ }\r
+ if ( this.data.allowdownload === 'yes' ) {\r
+ this.element.getChild( 0 ).removeAttribute( 'controlslist' );\r
+ } else {\r
+ this.element.getChild( 0 ).setAttribute( 'controlslist', 'nodownload' );\r
+ }\r
+ }\r
+ }\r
+ } );\r
+\r
+ if ( editor.contextMenu ) {\r
+ editor.addMenuGroup( 'html5audioGroup' );\r
+ editor.addMenuItem( 'html5audioPropertiesItem', {\r
+ label: editor.lang.html5audio.audioProperties,\r
+ icon: 'html5audio',\r
+ command: 'html5audio',\r
+ group: 'html5audioGroup'\r
+ });\r
+\r
+ editor.contextMenu.addListener( function( element ) {\r
+ if ( element &&\r
+ element.getChild( 0 ) &&\r
+ element.getChild( 0 ).hasClass &&\r
+ element.getChild( 0 ).hasClass( 'ckeditor-html5-audio' ) ) {\r
+ return { html5audioPropertiesItem: CKEDITOR.TRISTATE_OFF };\r
+ }\r
+ });\r
+ }\r
+\r
+ CKEDITOR.dialog.add( 'html5audio', this.path + 'dialogs/html5audio.js' );\r
+ }\r
+} );\r