audio.js 10 KB

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