]>
git.immae.eu Git - perso/Immae/Projets/packagist/ludivine-ckeditor-component.git/blob - sources/plugins/html5audio/plugin.js
1 CKEDITOR
. plugins
. add ( 'html5audio' , {
3 lang : 'de,en,eu,es,fr,ru,uk,uz' ,
5 init : function ( editor
) {
6 editor
. widgets
. add ( 'html5audio' , {
7 button : editor
. lang
. html5audio
. button
,
8 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.
9 // See issue #9 on github: https://github.com/iametza/ckeditor-html5-audio/issues/9
12 * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
13 * - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-audio class.
14 * - audio tags with src and controls attributes.
16 allowedContent : 'div(!ckeditor-html5-audio){text-align,float,margin-left,margin-right}; audio[src,controls,autoplay];' ,
17 requiredContent : 'div(ckeditor-html5-audio); audio[src,controls];' ,
18 upcast : function ( element
) {
19 return element
. name
=== 'div' && element
. hasClass ( 'ckeditor-html5-audio' );
25 var align
= this . element
. getStyle ( 'text-align' );
27 // If there's a child (the audio element)
28 if ( this . element
. getChild ( 0 ) ) {
29 // get it's attributes.
30 src
= this . element
. getChild ( 0 ). getAttribute ( 'src' );
31 autoplay
= this . element
. getChild ( 0 ). getAttribute ( 'autoplay' );
35 this . setData ( 'src' , src
);
38 this . setData ( 'align' , align
);
40 this . setData ( 'align' , 'none' );
44 this . setData ( 'autoplay' , 'yes' );
49 // If there is an audio source
50 if ( this . data
. src
) {
51 // and there isn't a child (the audio element)
52 if ( ! this . element
. getChild ( 0 ) ) {
53 // Create a new <audio> element.
54 var audioElement
= new CKEDITOR
. dom
. element ( 'audio' );
55 // Set the controls attribute.
56 audioElement
. setAttribute ( 'controls' , 'controls' );
57 // Append it to the container of the plugin.
58 this . element
. append ( audioElement
);
60 this . element
. getChild ( 0 ). setAttribute ( 'src' , this . data
. src
);
63 this . element
. removeStyle ( 'float' );
64 this . element
. removeStyle ( 'margin-left' );
65 this . element
. removeStyle ( 'margin-right' );
67 if ( this . data
. align
=== 'none' ) {
68 this . element
. removeStyle ( 'text-align' );
70 this . element
. setStyle ( 'text-align' , this . data
. align
);
73 if ( this . data
. align
=== 'left' ) {
74 this . element
. setStyle ( 'float' , this . data
. align
);
75 this . element
. setStyle ( 'margin-right' , '10px' );
76 } else if ( this . data
. align
=== 'right' ) {
77 this . element
. setStyle ( 'float' , this . data
. align
);
78 this . element
. setStyle ( 'margin-left' , '10px' );
81 if ( this . element
. getChild ( 0 ) ) {
82 if ( this . data
. autoplay
=== 'yes' ) {
83 this . element
. getChild ( 0 ). setAttribute ( 'autoplay' , 'autoplay' );
85 this . element
. getChild ( 0 ). removeAttribute ( 'autoplay' );
91 if ( editor
. contextMenu
) {
92 editor
. addMenuGroup ( 'html5audioGroup' );
93 editor
. addMenuItem ( 'html5audioPropertiesItem' , {
94 label : editor
. lang
. html5audio
. audioProperties
,
96 command : 'html5audio' ,
97 group : 'html5audioGroup'
100 editor
. contextMenu
. addListener ( function ( element
) {
102 element
. getChild ( 0 ) &&
103 element
. getChild ( 0 ). hasClass
&&
104 element
. getChild ( 0 ). hasClass ( 'ckeditor-html5-audio' ) ) {
105 return { html5audioPropertiesItem : CKEDITOR
. TRISTATE_OFF
};
110 CKEDITOR
. dialog
. add ( 'html5audio' , this . path
+ 'dialogs/html5audio.js' );