editor.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. <template>
  2. <div class="editor-wrapper">
  3. <div :id="editorId"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import Editor from 'wangeditor'
  8. import 'wangeditor/release/wangEditor.min.css'
  9. import { uploadImgOnce } from '@/api/data'
  10. import { oneOf } from '@/utils/util'
  11. export default {
  12. name: 'Editor',
  13. props: {
  14. value: {
  15. type: String,
  16. default: ''
  17. },
  18. /**
  19. * 绑定的值的类型, enum: ['html', 'text']
  20. */
  21. valueType: {
  22. type: String,
  23. default: 'html',
  24. validator: (val) => {
  25. return oneOf(val, ['html', 'text'])
  26. }
  27. },
  28. /**
  29. * @description 设置change事件触发时间间隔
  30. */
  31. changeInterval: {
  32. type: Number,
  33. default: 200
  34. },
  35. /**
  36. * @description 是否开启本地存储
  37. */
  38. cache: {
  39. type: Boolean,
  40. default: true
  41. }
  42. },
  43. computed: {
  44. editorId () {
  45. return `editor${this._uid}`
  46. }
  47. },
  48. methods: {
  49. setHtml (val) {
  50. this.editor.txt.html(val)
  51. },
  52. getTxt () {
  53. return this.editor.txt.text()
  54. },
  55. getEdior () {
  56. return new Editor(`#${this.editorId}`)
  57. },
  58. clearText () {
  59. this.editor.txt.clear()
  60. },
  61. randomStr (len) {
  62. len = len || 32
  63. let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
  64. let maxPos = chars.length
  65. let pwd = ''
  66. for (let i = 0; i < len; i++) {
  67. pwd += chars.charAt(Math.floor(Math.random() * maxPos))
  68. }
  69. return pwd
  70. },
  71. createFileName (filename) {
  72. let pos = filename.lastIndexOf('.')
  73. let suffix = filename.substring(pos)
  74. return this.randomStr(20) + suffix
  75. }
  76. },
  77. mounted () {
  78. let _this = this
  79. this.editor = new Editor(`#${this.editorId}`)
  80. this.editor.customConfig.zIndex = 100
  81. this.editor.customConfig.onchange = (html) => {
  82. let text = this.editor.txt.text()
  83. if (this.cache) localStorage.editorCache = html
  84. this.$emit('input', this.valueType === 'html' ? html : text)
  85. this.$emit('on-change', html, text)
  86. }
  87. this.editor.customConfig.onchangeTimeout = this.changeInterval
  88. this.editor.customConfig.uploadImgServer = process.env.VUE_APP_API_BASE_URL + '/upload'
  89. this.editor.customConfig.uploadFileName = 'file'
  90. this.editor.customConfig.uploadImgParams = {
  91. savePathType: 'web'
  92. }
  93. this.editor.customConfig.uploadImgHooks = {
  94. before: function (xhr, editor, files) {
  95. console.log(xhr, editor, files)
  96. // 图片上传之前触发
  97. // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
  98. // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
  99. // return {
  100. // prevent: true,
  101. // msg: '放弃上传'
  102. // }
  103. },
  104. success: function (xhr, editor, result) {
  105. console.log(xhr, editor, result)
  106. // 图片上传并返回结果,图片插入成功之后触发
  107. // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
  108. },
  109. fail: function (xhr, editor, result) {
  110. console.log(xhr, editor, result)
  111. // 图片上传并返回结果,但图片插入错误时触发
  112. // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
  113. },
  114. error: function (xhr, editor) {
  115. console.log(xhr, editor)
  116. // 图片上传出错时触发
  117. // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
  118. },
  119. timeout: function (xhr, editor) {
  120. // 图片上传超时时触发
  121. // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
  122. },
  123. // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
  124. // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
  125. customInsert: function (insertImg, result, editor) {
  126. // console.log(insertImg, result, editor)
  127. // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
  128. // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
  129. // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
  130. insertImg(result.data)
  131. // result 必须是一个 JSON 格式字符串!!!否则报错
  132. }
  133. }
  134. // create这个方法一定要在所有配置项之后调用
  135. this.editor.create()
  136. this.editor.txt.clear()
  137. // 如果本地有存储加载本地存储内容
  138. let html = this.value || localStorage.editorCache
  139. if (html) this.editor.txt.html(html)
  140. }
  141. }
  142. </script>
  143. <style lang="less">
  144. /*.editor-wrapper *{*/
  145. /* z-index: 100 !important;*/
  146. /*}*/
  147. </style>