1 CKEDITOR
.dialog
.add( 'audio', function ( editor
)
3 var lang
= editor
.lang
.audio
;
5 function commitValue( audioNode
, extraStyles
)
7 var value
=this.getValue();
9 if ( !value
&& this.id
=='id' )
12 audioNode
.setAttribute( this.id
, value
);
19 extraStyles
.backgroundImage
= 'url(' + value
+ ')';
22 extraStyles
.width
= value
+ 'px';
25 extraStyles
.height
= value
+ 'px';
30 function commitSrc( audioNode
, extraStyles
, audios
)
32 var match
= this.id
.match(/(\w+)(\d)/),
34 number
= parseInt(match
[2], 10);
36 var audio
= audios
[number
] || (audios
[number
]={});
37 audio
[id
] = this.getValue();
40 function loadValue( audioNode
)
43 this.setValue( audioNode
.getAttribute( this.id
) );
47 this.setValue( generateId() );
51 function loadSrc( audioNode
, audios
)
53 var match
= this.id
.match(/(\w+)(\d)/),
55 number
= parseInt(match
[2], 10);
57 var audio
= audios
[number
];
60 this.setValue( audio
[ id
] );
66 return 'audio' + now
.getFullYear() + now
.getMonth() + now
.getDate() + now
.getHours() + now
.getMinutes() + now
.getSeconds();
69 // To automatically get the dimensions of the poster image
70 var onImgLoadEvent = function()
73 var preview
= this.previewImage
;
74 preview
.removeListener( 'load', onImgLoadEvent
);
75 preview
.removeListener( 'error', onImgLoadErrorEvent
);
76 preview
.removeListener( 'abort', onImgLoadErrorEvent
);
78 this.setValueOf( 'info', 'width', preview
.$.width
);
79 this.setValueOf( 'info', 'height', preview
.$.height
);
82 var onImgLoadErrorEvent = function()
84 // Error. Image is not loaded.
85 var preview
= this.previewImage
;
86 preview
.removeListener( 'load', onImgLoadEvent
);
87 preview
.removeListener( 'error', onImgLoadErrorEvent
);
88 preview
.removeListener( 'abort', onImgLoadErrorEvent
);
92 title : lang
.dialogTitle
,
98 // Clear previously saved elements.
99 this.fakeImage
= this.audioNode
= null;
100 // To get dimensions of poster image
101 this.previewImage
= editor
.document
.createElement( 'img' );
103 var fakeImage
= this.getSelectedElement();
104 if ( fakeImage
&& fakeImage
.data( 'cke-real-element-type' ) && fakeImage
.data( 'cke-real-element-type' ) == 'audio' )
106 this.fakeImage
= fakeImage
;
108 var audioNode
= editor
.restoreRealElement( fakeImage
),
110 sourceList
= audioNode
.getElementsByTag( 'source', '' );
111 if (sourceList
.count()==0)
112 sourceList
= audioNode
.getElementsByTag( 'source', 'cke' );
114 for ( var i
= 0, length
= sourceList
.count() ; i
< length
; i
++ )
116 var item
= sourceList
.getItem( i
);
117 audios
.push( {src : item
.getAttribute( 'src' ), type: item
.getAttribute( 'type' )} );
120 this.audioNode
= audioNode
;
122 this.setupContent( audioNode
, audios
);
125 this.setupContent( null, [] );
130 // If there's no selected element create one. Otherwise, reuse it
131 var audioNode
= null;
132 if ( !this.fakeImage
)
134 audioNode
= CKEDITOR
.dom
.element
.createFromHtml( '<cke:audio></cke:audio>', editor
.document
);
135 audioNode
.setAttributes(
137 controls : 'controls'
142 audioNode
= this.audioNode
;
145 var extraStyles
= {}, audios
= [];
146 this.commitContent( audioNode
, extraStyles
, audios
);
148 var innerHtml
= '', links
= '',
149 link
= lang
.linkTemplate
|| '',
150 fallbackTemplate
= lang
.fallbackTemplate
|| '';
151 for(var i
=0; i
<audios
.length
; i
++)
153 var audio
= audios
[i
];
154 if ( !audio
|| !audio
.src
)
156 innerHtml
+= '<cke:source src="' + audio
.src
+ '" type="' + audio
.type
+ '" />';
157 links
+= link
.replace('%src%', audio
.src
).replace('%type%', audio
.type
);
159 audioNode
.setHtml( innerHtml
+ fallbackTemplate
.replace( '%links%', links
) );
161 // Refresh the fake image.
162 var newFakeImage
= editor
.createFakeElement( audioNode
, 'cke_audio', 'audio', false );
163 newFakeImage
.setStyles( extraStyles
);
164 if ( this.fakeImage
)
166 newFakeImage
.replace( this.fakeImage
);
167 editor
.getSelection().selectElement( newFakeImage
);
171 // Insert it in a div
172 var div
= new CKEDITOR
.dom
.element( 'DIV', editor
.document
);
173 editor
.insertElement( div
);
174 div
.append( newFakeImage
);
179 if ( this.previewImage
)
181 this.previewImage
.removeListener( 'load', onImgLoadEvent
);
182 this.previewImage
.removeListener( 'error', onImgLoadErrorEvent
);
183 this.previewImage
.removeListener( 'abort', onImgLoadErrorEvent
);
184 this.previewImage
.remove();
185 this.previewImage
= null; // Dialog is closed.
197 widths: [ '', '100px'],
203 commit : commitValue
,
205 onChange : function()
207 var dialog
= this.getDialog(),
208 newUrl
= this.getValue();
210 //Update preview image
211 if ( newUrl
.length
> 0 ) //Prevent from load before onShow
213 dialog
= this.getDialog();
214 var preview
= dialog
.previewImage
;
216 preview
.on( 'load', onImgLoadEvent
, dialog
);
217 preview
.on( 'error', onImgLoadErrorEvent
, dialog
);
218 preview
.on( 'abort', onImgLoadErrorEvent
, dialog
);
219 preview
.setAttribute( 'src', newUrl
);
227 style : 'display:inline-block;margin-top:10px;',
231 target: 'info:poster',
232 url: editor
.config
.filebrowserImageBrowseUrl
|| editor
.config
.filebrowserBrowseUrl
234 label : editor
.lang
.common
.browseServer
239 widths: [ '33%', '33%', '33%'],
244 label : editor
.lang
.common
.width
,
246 validate : CKEDITOR
.dialog
.validate
.notEmpty( lang
.widthRequired
),
247 commit : commitValue
,
253 label : editor
.lang
.common
.height
,
255 validate : CKEDITOR
.dialog
.validate
.notEmpty(lang
.heightRequired
),
256 commit : commitValue
,
263 commit : commitValue
,
270 widths: [ '', '100px', '75px'],
275 label : lang
.sourceaudio
,
283 style : 'display:inline-block;margin-top:10px;',
288 url: editor
.config
.filebrowserAudioBrowseUrl
|| editor
.config
.filebrowserBrowseUrl
290 label : editor
.lang
.common
.browseServer
294 label : lang
.sourceType
,
296 'default' : 'audio/mp3',
299 [ 'MP3', 'audio/mp3' ],
300 [ 'WAV', 'audio/wav' ]
309 widths: [ '', '100px', '75px'],
314 label : lang
.sourceaudio
,
322 style : 'display:inline-block;margin-top:10px;',
327 url: editor
.config
.filebrowserAudioBrowseUrl
|| editor
.config
.filebrowserBrowseUrl
329 label : editor
.lang
.common
.browseServer
333 label : lang
.sourceType
,
335 'default':'audio/wav',
338 [ 'MP3', 'audio/mp3' ],
339 [ 'WAV', 'audio/wav' ]