audio.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275
  1. CKEDITOR.dialog.add('audio', function(editor)
  2. {
  3. var lang = editor.lang.audio;
  4. function commitValue(audioNode, extraStyles) {
  5. var value = this.getValue();
  6. if (!value && this.id == 'id') {
  7. value = generateId();
  8. }
  9. switch (this.id) {
  10. case 'width':
  11. audioNode.setAttribute('style', 'width:' + value + 'px;');
  12. extraStyles.width = value + 'px';
  13. //no break
  14. case 'id':
  15. audioNode.setAttribute(this.id, value);
  16. break;
  17. case 'autoplay':
  18. if (value === true) {
  19. audioNode.setAttribute('autoplay', 'autoplay');
  20. break;
  21. }
  22. audioNode.removeAttribute('autoplay');
  23. break;
  24. }
  25. }
  26. function commitSrc(audioNode, extraStyles, audios) {
  27. var match = this.id.match(/(\w+)(\d)/),
  28. id = match[1],
  29. number = parseInt(match[2], 10);
  30. var audio = audios[number] || (audios[number] = {});
  31. audio[id] = this.getValue();
  32. }
  33. function loadValue(audioNode) {
  34. if (audioNode) {
  35. var value = audioNode.getAttribute(this.id);
  36. if (this.id != 'autoplay') {
  37. this.setValue(value);
  38. return;
  39. }
  40. this.setValue(value === 'autoplay');
  41. return;
  42. }
  43. if (this.id == 'id') {
  44. this.setValue(generateId());
  45. }
  46. }
  47. function loadSrc(audioNode, audios) {
  48. var match = this.id.match(/(\w+)(\d)/),
  49. id = match[1],
  50. number = parseInt(match[2], 10);
  51. var audio = audios[number];
  52. if (!audio) {
  53. return;
  54. }
  55. this.setValue(audio[ id ]);
  56. }
  57. function generateId() {
  58. var now = new Date();
  59. return 'audio' + now.getFullYear() + now.getMonth() + now.getDate() + now.getHours() + now.getMinutes() + now.getSeconds();
  60. }
  61. return {
  62. title: lang.dialogTitle,
  63. minWidth: 400,
  64. minHeight: 200,
  65. onShow: function() {
  66. // Clear previously saved elements.
  67. this.fakeImage = this.audioNode = null;
  68. var fakeImage = this.getSelectedElement();
  69. if (fakeImage && fakeImage.data('cke-real-element-type') && fakeImage.data('cke-real-element-type') == 'audio') {
  70. this.fakeImage = fakeImage;
  71. var audioNode = editor.restoreRealElement(fakeImage),
  72. audios = [],
  73. sourceList = audioNode.getElementsByTag('source', '');
  74. if (sourceList.count() == 0) {
  75. sourceList = audioNode.getElementsByTag('source', 'cke');
  76. }
  77. for (var i = 0, length = sourceList.count(); i < length; i++) {
  78. var item = sourceList.getItem(i);
  79. audios.push({src: item.getAttribute('src'), type: item.getAttribute('type')});
  80. }
  81. this.audioNode = audioNode;
  82. this.setupContent(audioNode, audios);
  83. } else {
  84. this.setupContent(null, []);
  85. }
  86. },
  87. onOk: function() {
  88. // If there's no selected element create one. Otherwise, reuse it
  89. var audioNode = null;
  90. if (!this.fakeImage) {
  91. audioNode = CKEDITOR.dom.element.createFromHtml('<cke:audio></cke:audio>', editor.document);
  92. audioNode.setAttributes({
  93. controls: 'controls'
  94. });
  95. } else {
  96. audioNode = this.audioNode;
  97. }
  98. var extraStyles = {}, audios = [];
  99. this.commitContent(audioNode, extraStyles, audios);
  100. var innerHtml = '', links = '',
  101. link = lang.linkTemplate || '',
  102. fallbackTemplate = lang.fallbackTemplate || '';
  103. for (var i = 0; i < audios.length; i++) {
  104. var audio = audios[i];
  105. if (!audio || !audio.src) {
  106. continue;
  107. }
  108. innerHtml += '<cke:source src="' + audio.src + '" type="' + audio.type + '" />';
  109. links += link.replace('%src%', audio.src).replace('%type%', audio.type);
  110. }
  111. audioNode.setHtml(innerHtml + fallbackTemplate.replace('%links%', links));
  112. // Refresh the fake image.
  113. var newFakeImage = editor.createFakeElement(audioNode, 'cke_audio', 'audio', false);
  114. newFakeImage.setStyles(extraStyles);
  115. if (this.fakeImage) {
  116. newFakeImage.replace(this.fakeImage);
  117. editor.getSelection().selectElement(newFakeImage);
  118. } else {
  119. // Insert it in a div
  120. var div = new CKEDITOR.dom.element('DIV', editor.document);
  121. editor.insertElement(div);
  122. div.append(newFakeImage);
  123. }
  124. },
  125. contents: [
  126. {
  127. id: 'info',
  128. elements: [
  129. {
  130. type: 'hbox',
  131. widths: ['20%', '80%'],
  132. children: [
  133. {
  134. type: 'text',
  135. id: 'width',
  136. label: editor.lang.common.width,
  137. 'default': 400,
  138. validate: CKEDITOR.dialog.validate.notEmpty(lang.widthRequired),
  139. commit: commitValue,
  140. setup: loadValue
  141. },
  142. {
  143. type: 'text',
  144. id: 'id',
  145. label: 'Id',
  146. commit: commitValue,
  147. setup: loadValue
  148. }
  149. ]
  150. },
  151. {
  152. type: 'hbox',
  153. widths: ['', '100px', '75px'],
  154. children: [
  155. {
  156. type: 'text',
  157. id: 'src0',
  158. label: lang.sourceAudio,
  159. commit: commitSrc,
  160. setup: loadSrc
  161. },
  162. {
  163. type: 'button',
  164. id: 'browse',
  165. hidden: 'true',
  166. style: 'display:inline-block;margin-top:10px;',
  167. filebrowser: {
  168. action: 'Browse',
  169. target: 'info:src0',
  170. url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl
  171. },
  172. label: editor.lang.common.browseServer
  173. },
  174. {
  175. id: 'type0',
  176. label: lang.sourceType,
  177. type: 'select',
  178. 'default': 'audio/mp3',
  179. items: [
  180. ['MP3', 'audio/mp3'],
  181. ['OGG', 'audio/ogg']
  182. ],
  183. commit: commitSrc,
  184. setup: loadSrc
  185. }]
  186. },
  187. {
  188. type: 'hbox',
  189. widths: ['', '100px', '75px'],
  190. children: [
  191. {
  192. type: 'text',
  193. id: 'src1',
  194. label: lang.sourceAudio,
  195. commit: commitSrc,
  196. setup: loadSrc
  197. },
  198. {
  199. type: 'button',
  200. id: 'browse',
  201. hidden: 'true',
  202. style: 'display:inline-block;margin-top:10px;',
  203. filebrowser: {
  204. action: 'Browse',
  205. target: 'info:src1',
  206. url: editor.config.filebrowserAudioBrowseUrl || editor.config.filebrowserBrowseUrl
  207. },
  208. label: editor.lang.common.browseServer
  209. },
  210. {
  211. id: 'type1',
  212. label: lang.sourceType,
  213. type: 'select',
  214. 'default': 'audio/webm',
  215. items: [
  216. ['MP3', 'audio/mp3'],
  217. ['OGG', 'audio/ogg']
  218. ],
  219. commit: commitSrc,
  220. setup: loadSrc
  221. }
  222. ]
  223. },
  224. {
  225. type: 'hbox',
  226. width: ['100%'],
  227. children: [
  228. {
  229. id: 'autoplay',
  230. type: 'checkbox',
  231. label: lang.autoPlay,
  232. 'default': false,
  233. commit: commitValue,
  234. setup: loadValue
  235. }
  236. ]
  237. }
  238. ]
  239. }
  240. ]
  241. };
  242. });