uploadEditor.vue 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <div class="tinymce-editor">
  3. <editors v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" @onChange="onChange"> </editors>
  4. </div>
  5. </template>
  6. <script>
  7. import Editors from '@tinymce/tinymce-vue'
  8. import tinymce from 'tinymce/tinymce'
  9. import 'tinymce/themes/silver/theme'
  10. import 'tinymce/plugins/image'
  11. import 'tinymce/plugins/link'
  12. import 'tinymce/plugins/media'
  13. import 'tinymce/plugins/table'
  14. import 'tinymce/plugins/lists'
  15. import 'tinymce/plugins/contextmenu'
  16. import 'tinymce/plugins/wordcount'
  17. import 'tinymce/plugins/colorpicker'
  18. import 'tinymce/plugins/textcolor'
  19. import 'tinymce/plugins/fullscreen'
  20. var COS = require('cos-js-sdk-v5')
  21. var cos = new COS({
  22. SecretId: 'AKIDE6IpMi8fJQRCg1iuWzFajjRs43kbbets',
  23. SecretKey: 'tXzuwMfplTTK3c9GFUyETilasvQfePu9',
  24. })
  25. export default {
  26. components: {
  27. Editors,
  28. },
  29. props: {
  30. value: {
  31. type: String,
  32. required: false,
  33. },
  34. triggerChange: {
  35. type: Boolean,
  36. default: false,
  37. required: false,
  38. },
  39. disabled: {
  40. type: Boolean,
  41. default: false,
  42. },
  43. plugins: {
  44. type: [String, Array],
  45. default: 'paste lists image link media table textcolor wordcount contextmenu fullscreen',
  46. },
  47. toolbar: {
  48. type: [String, Array],
  49. default: '',
  50. branding: false,
  51. },
  52. },
  53. data() {
  54. return {
  55. //初始化配置
  56. init: {
  57. selector: '#tinydemo',
  58. language_url: '/tinymce/langs/zh_CN.js',
  59. language: 'zh_CN',
  60. skin_url: '/tinymce/skins/lightgray',
  61. height: 300,
  62. plugins: ['paste'],
  63. toolbar: this.toolbar,
  64. branding: true,
  65. menubar: false,
  66. toolbar_drawer: true,
  67. paste_data_images: true,
  68. images_upload_credentials: true,
  69. // 解决截图,不走图片上传问题
  70. urlconverter_callback: (url, node, onSave, name) => {
  71. if (node === 'img' && url.startsWith('blob:')) {
  72. // Do some custom URL conversion
  73. // console.log('urlConverter:', url, node, onSave, name)
  74. tinymce.activeEditor && tinymce.activeEditor.uploadImages()
  75. }
  76. // Return new URL
  77. return url
  78. },
  79. images_upload_handler: (blobInfo, success) => {
  80. this.cosUpload(blobInfo, success)
  81. // let formData = new FormData()
  82. // formData.append('file', blobInfo.blob(), blobInfo.filename())
  83. // formData.append('biz', 'jeditor')
  84. // formData.append('jeditor', '1')
  85. // uploadAction(window._CONFIG['domianURL'] + '/sys/common/upload', formData).then((res) => {
  86. // console.log(res)
  87. // if (res.success) {
  88. // if (res.message == 'local') {
  89. // const img = 'data:image/jpeg;base64,' + blobInfo.base64()
  90. // success(img)
  91. // } else {
  92. // let img = getFileAccessHttpUrl(res.message)
  93. // success(img)
  94. // }
  95. // }
  96. // })
  97. },
  98. },
  99. myValue: this.value,
  100. }
  101. },
  102. mounted() {
  103. tinymce.init(this.init)
  104. },
  105. methods: {
  106. onClick(e) {
  107. this.$emit('onClick', e, tinymce)
  108. },
  109. //可以添加一些自己的自定义事件,如清空内容
  110. clear() {
  111. this.myValue = ''
  112. },
  113. onChange(e) {},
  114. cosUpload(blobInfo, success) {
  115. console.log(success)
  116. this.$nextTick(() => {
  117. var that = this
  118. let date = new Date()
  119. let y = date.getFullYear()
  120. let MM = date.getMonth() + 1
  121. MM = MM < 10 ? '0' + MM : MM
  122. let d = date.getDate()
  123. d = d < 10 ? '0' + d : d
  124. var timeElse = new Date().getTime()
  125. var arr = blobInfo.filename().split('.')
  126. var str = ''
  127. for (let i = 0; i < arr.length; i++) {
  128. if (i == arr.length - 1) {
  129. } else {
  130. if (i == arr.length - 2) {
  131. str += arr[i]
  132. } else {
  133. str += arr[i] + '.'
  134. }
  135. }
  136. }
  137. // console.log(str + '-' + timeElse + '.' + arr[arr.length - 1])
  138. cos.putObject(
  139. {
  140. Bucket: 'media-1301855440',
  141. /* 必须 */
  142. Region: 'ap-chongqing',
  143. /* 存储桶所在地域,必须字段 */
  144. Key: 'video/' + y + '-' + MM + '-' + d + '/' + str + '-' + timeElse + '.jpg',
  145. /* 必须 */
  146. StorageClass: 'STANDARD',
  147. Body: blobInfo.blob(), // 上传文件对象
  148. onProgress: function (progressData) {
  149. //进度条方法
  150. },
  151. onTaskReady: function (tid) {
  152. // console.log('onTaskReady', tid);
  153. },
  154. onTaskStart: function (info) {
  155. //开始上传
  156. // console.log('onTaskStart', info);
  157. },
  158. },
  159. function (err, data) {
  160. console.log(err, data)
  161. if (err) {
  162. that.$message.error('上传失败!!!' + err)
  163. return
  164. } else {
  165. var img = '//' + data.Location
  166. success(img)
  167. }
  168. }
  169. )
  170. })
  171. },
  172. },
  173. watch: {
  174. value(newValue) {
  175. this.myValue = newValue == null ? '' : newValue
  176. },
  177. myValue(newValue) {
  178. console.log(newValue)
  179. console.log(tinymce.editors['tinydemo'])
  180. // tinymce.editors['tinydemo'].getContent()
  181. if (this.triggerChange) {
  182. this.$emit('change', newValue)
  183. } else {
  184. this.$emit('input', newValue)
  185. }
  186. },
  187. },
  188. }
  189. </script>
  190. <style scoped></style>