media.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. /*******************************************************************************
  2. * KindEditor - WYSIWYG HTML Editor for Internet
  3. * Copyright (C) 2006-2011 kindsoft.net
  4. *
  5. * @author Roddy <luolonghao@gmail.com>
  6. * @site http://www.kindsoft.net/
  7. * @licence http://www.kindsoft.net/license.php
  8. *******************************************************************************/
  9. KindEditor.plugin('media', function(K) {
  10. var self = this, name = 'media', lang = self.lang(name + '.'),
  11. allowMediaUpload = K.undef(self.allowMediaUpload, false),
  12. allowFileManager = K.undef(self.allowFileManager, false),
  13. formatUploadUrl = K.undef(self.formatUploadUrl, true),
  14. extraParams = K.undef(self.extraFileUploadParams, {}),
  15. filePostName = K.undef(self.filePostName, 'imgFile'),
  16. uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php');
  17. self.plugin.media = {
  18. edit : function() {
  19. var html = [
  20. '<div class="ke-dialog-content-inner">',
  21. //url
  22. '<div class="ke-dialog-row ke-clearfix">',
  23. '<label for="keUrl" class="row-left">' + lang.url + ':</label>',
  24. '<div class="row-right">',
  25. '<input class="ke-input-text" type="text" id="keUrl" name="url" value="" style="width:180px;" /> &nbsp;',
  26. '<input type="button" class="ke-upload-button" value="' + lang.upload + '" /> &nbsp;',
  27. '<span class="ke-button-common ke-button-outer">',
  28. '<input type="button" class="ke-button-common ke-button" name="viewServer" value="' + lang.viewServer + '" />',
  29. '</span>',
  30. '<div>支持优酷、爱奇艺、土豆、腾讯视频、56等视频网站【<span style="color:green">通用代码</span>】',
  31. '</div>',
  32. '</div>',
  33. '</div>',
  34. //width
  35. '<div class="ke-dialog-row ke-clearfix">',
  36. '<label for="keWidth" class="row-left">' + lang.width + ':</label>',
  37. '<div class="row-right">',
  38. '<input type="text" id="keWidth" class="ke-input-text ke-input-number" name="width" value="550" maxlength="4" />',
  39. '</div>',
  40. '</div>',
  41. //height
  42. '<div class="ke-dialog-row ke-clearfix">',
  43. '<label for="keHeight" class="row-left">' + lang.height + ':</label>',
  44. '<div class="row-right">',
  45. '<input type="text" id="keHeight" class="ke-input-text ke-input-number" name="height" value="400" maxlength="4" />',
  46. '</div>',
  47. '</div>',
  48. //autostart
  49. '<div class="ke-dialog-row ke-clearfix">',
  50. '<label for="keAutostart" class="row-left">' + lang.autostart + ':</label>',
  51. '<div class="row-right">',
  52. '<input type="checkbox" id="keAutostart" name="autostart" class="ke-input-checkbox" value="" /> ',
  53. '</div>',
  54. '</div>',
  55. '</div>'
  56. ].join('');
  57. var dialog = self.createDialog({
  58. name : name,
  59. width : 450,
  60. height : 260,
  61. title : self.lang(name),
  62. body : html,
  63. yesBtn : {
  64. name : self.lang('yes'),
  65. click : function(e) {
  66. var url = K.trim(urlBox.val()),
  67. width = widthBox.val(),
  68. height = heightBox.val();
  69. var match = url.match(/^<iframe\s(.*?)src=('|")(.*?)('|")/);
  70. if(!match) {
  71. if (url == 'http://' || K.invalidUrl(url)) {
  72. K.options.errorMsgHandler(self.lang('invalidUrl'), "error");
  73. urlBox[0].focus();
  74. return;
  75. }
  76. }
  77. if (!/^\d*$/.test(width)) {
  78. K.options.errorMsgHandler(self.lang('invalidWidth'), "error");
  79. widthBox[0].focus();
  80. return;
  81. }
  82. if (!/^\d*$/.test(height)) {
  83. K.options.errorMsgHandler(self.lang('invalidHeight'), "error");
  84. heightBox[0].focus();
  85. return;
  86. }
  87. if(!match) {
  88. var html = K.mediaImg(self.themesPath + 'common/blank.gif', {
  89. src: url,
  90. type: K.mediaType(url),
  91. width: width,
  92. height: height,
  93. autostart: autostartBox[0].checked ? 'true' : 'false',
  94. loop: 'true'
  95. });
  96. } else {
  97. var html = '<iframe src="' + match[3] + '" frameborder="0" style="width:' + width + 'px;height:' + height + 'px;"></iframe>';
  98. }
  99. self.insertHtml(html).hideDialog().focus();
  100. }
  101. }
  102. }),
  103. div = dialog.div,
  104. urlBox = K('[name="url"]', div),
  105. viewServerBtn = K('[name="viewServer"]', div),
  106. widthBox = K('[name="width"]', div),
  107. heightBox = K('[name="height"]', div),
  108. autostartBox = K('[name="autostart"]', div);
  109. urlBox.val('http://');
  110. if (allowMediaUpload) {
  111. var uploadbutton = K.uploadbutton({
  112. button : K('.ke-upload-button', div)[0],
  113. fieldName : filePostName,
  114. extraParams : extraParams,
  115. url : K.addParam(uploadJson, 'fileType=media'),
  116. afterUpload : function(data) {
  117. dialog.hideLoading();
  118. if (data.code == "000") {
  119. var url = data.data.url;
  120. if (formatUploadUrl) {
  121. url = K.formatUrl(url, 'absolute');
  122. }
  123. urlBox.val(url);
  124. if (self.afterUpload) {
  125. self.afterUpload.call(self, url, data, name);
  126. }
  127. K.options.errorMsgHandler(self.lang('uploadSuccess'), "ok");
  128. } else {
  129. K.options.errorMsgHandler(data.message, "error", "error");
  130. }
  131. },
  132. afterError : function(html) {
  133. dialog.hideLoading();
  134. self.errorDialog(html);
  135. }
  136. });
  137. uploadbutton.fileBox.change(function(e) {
  138. dialog.showLoading(self.lang('uploadLoading'));
  139. uploadbutton.submit();
  140. });
  141. } else {
  142. K('.ke-upload-button', div).hide();
  143. }
  144. if (allowMediaUpload && allowFileManager) {
  145. viewServerBtn.click(function(e) {
  146. self.loadPlugin('filemanager', function() {
  147. self.plugin.filemanagerDialog({
  148. dirName : 'media',
  149. clickFn : function(url) {
  150. K('[name="url"]', div).val(url);
  151. if (self.afterSelectFile) {
  152. self.afterSelectFile.call(self, url);
  153. }
  154. }
  155. });
  156. });
  157. });
  158. } else {
  159. K("#keUrl").css("width", "280px");
  160. viewServerBtn.hide();
  161. }
  162. var img = self.plugin.getSelectedMedia();
  163. if (img) {
  164. var attrs = K.mediaAttrs(img.attr('data-ke-tag'));
  165. urlBox.val(attrs.src);
  166. widthBox.val(K.removeUnit(img.css('width')) || attrs.width || 0);
  167. heightBox.val(K.removeUnit(img.css('height')) || attrs.height || 0);
  168. autostartBox[0].checked = (attrs.autostart === 'true');
  169. }
  170. urlBox[0].focus();
  171. urlBox[0].select();
  172. },
  173. 'delete' : function() {
  174. self.plugin.getSelectedMedia().remove();
  175. // [IE] 删除图片后立即点击图片按钮出错
  176. self.addBookmark();
  177. }
  178. };
  179. self.clickToolbar(name, self.plugin.media.edit);
  180. });