lilei 2 gadi atpakaļ
vecāks
revīzija
b8f4f4da82

+ 49 - 3
package-lock.json

@@ -1026,6 +1026,22 @@
         }
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.20.13",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.20.13.tgz",
+      "integrity": "sha512-p39/6rmY9uvlzRiLZBIB3G9/EBr66LBMcYm7fIDeSBNdRjF2AGD3rFZucUyAgGHC2N+7DdLvVi33uTjSE44FIw==",
+      "requires": {
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.11"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.6.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.6.0.tgz",
@@ -4532,6 +4548,11 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.9.tgz",
       "integrity": "sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A=="
     },
+    "core-js-pure": {
+      "version": "3.28.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.28.0.tgz",
+      "integrity": "sha512-DSOVleA9/v3LNj/vFxAPfUHttKTzrB2RXhAPvR5TPXn4vrra3Z2ssytvRyt8eruJwAfwAiFADEbrjcRdcvPLQQ=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -17243,9 +17264,34 @@
       }
     },
     "wangeditor": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-3.1.1.tgz",
-      "integrity": "sha1-+9PB1JdpI8nt67hbKdMLNVEq0Dk="
+      "version": "4.7.15",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-4.7.15.tgz",
+      "integrity": "sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@babel/runtime-corejs3": "^7.11.2",
+        "tslib": "^2.1.0"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.20.13",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
+          "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.11"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+          "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
+        },
+        "tslib": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+          "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
+        }
+      }
     },
     "warning": {
       "version": "4.0.3",

+ 1 - 1
package.json

@@ -41,7 +41,7 @@
     "vue2.0-zoom": "^2.1.1",
     "vuescroll": "^4.17.3",
     "vuex": "^3.1.1",
-    "wangeditor": "^3.1.1"
+    "wangeditor": "^4.7.15"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.2.1",

+ 11 - 0
src/api/data.js

@@ -35,6 +35,17 @@ export const getAreaAll = () => {
   }).then(res => res.data)
 }
 
+export const uploadFile = (params) => {
+  return axios({
+    url: '/upload',
+    method: 'post',
+    data: params,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
 /**
  * 获取ali OSS 上传签名
  * @returns {Q.Promise<any> | * | Q.Promise<T | never> | PromiseLike<T | never> | Promise<T | never>}

+ 0 - 82
src/components/Editor/QuillEditor.vue

@@ -1,82 +0,0 @@
-<template>
-  <div :class="prefixCls">
-    <quill-editor
-      v-model="content"
-      ref="myQuillEditor"
-      :options="editorOption"
-      @blur="onEditorBlur($event)"
-      @focus="onEditorFocus($event)"
-      @ready="onEditorReady($event)"
-      @change="onEditorChange($event)">
-    </quill-editor>
-
-  </div>
-</template>
-
-<script>
-import 'quill/dist/quill.core.css'
-import 'quill/dist/quill.snow.css'
-import 'quill/dist/quill.bubble.css'
-
-import { quillEditor } from 'vue-quill-editor'
-
-export default {
-  name: 'QuillEditor',
-  components: {
-    quillEditor
-  },
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-editor-quill'
-    },
-    // 表单校验用字段
-    // eslint-disable-next-line
-    value: {
-      type: String
-    }
-  },
-  data () {
-    return {
-      content: null,
-      editorOption: {
-        // some quill options
-      }
-    }
-  },
-  methods: {
-    onEditorBlur (quill) {
-      console.log('editor blur!', quill)
-    },
-    onEditorFocus (quill) {
-      console.log('editor focus!', quill)
-    },
-    onEditorReady (quill) {
-      console.log('editor ready!', quill)
-    },
-    onEditorChange ({ quill, html, text }) {
-      console.log('editor change!', quill, html, text)
-      this.$emit('change', html)
-    }
-  },
-  watch: {
-    value (val) {
-      this.content = val
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import url('../index.less');
-
-/* 覆盖 quill 默认边框圆角为 ant 默认圆角,用于统一 ant 组件风格 */
-.ant-editor-quill {
-  /deep/ .ql-toolbar.ql-snow {
-    border-radius: @border-radius-base @border-radius-base 0 0;
-  }
-  /deep/ .ql-container.ql-snow {
-    border-radius: 0 0 @border-radius-base @border-radius-base;
-  }
-}
-</style>

+ 0 - 57
src/components/Editor/WangEditor.vue

@@ -1,57 +0,0 @@
-<template>
-  <div :class="prefixCls">
-    <div ref="editor" class="editor-wrapper"></div>
-  </div>
-</template>
-
-<script>
-import WEditor from 'wangeditor'
-
-export default {
-  name: 'WangEditor',
-  props: {
-    prefixCls: {
-      type: String,
-      default: 'ant-editor-wang'
-    },
-    // eslint-disable-next-line
-    value: {
-      type: String
-    }
-  },
-  data () {
-    return {
-      editor: null,
-      editorContent: null
-    }
-  },
-  watch: {
-    value (val) {
-      this.editorContent = val
-      this.editor.txt.html(val)
-    }
-  },
-  mounted () {
-    this.initEditor()
-  },
-  methods: {
-    initEditor () {
-      this.editor = new WEditor(this.$refs.editor)
-      // this.editor.onchangeTimeout = 200
-      this.editor.customConfig.onchange = (html) => {
-        this.editorContent = html
-        this.$emit('change', this.editorContent)
-      }
-      this.editor.create()
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.ant-editor-wang {
-  .editor-wrapper {
-    text-align: left;
-  }
-}
-</style>

+ 121 - 123
src/components/WEeditor/editor.vue

@@ -6,146 +6,144 @@
 </template>
 
 <script>
-  import Editor from 'wangeditor'
-  import 'wangeditor/release/wangEditor.min.css'
-  import { uploadImgOnce } from '@/api/data'
-  import { oneOf } from '@/utils/util'
+import Editor from 'wangeditor'
+import { oneOf } from '@/utils/util'
+import { uploadFile } from '@/api/data'
+export default {
+  name: 'Editor',
 
-  export default {
-    name: 'Editor',
-
-    props: {
-      value: {
-        type: String,
-        default: ''
-      },
-      /**
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    /**
        * 绑定的值的类型, enum: ['html', 'text']
        */
-      valueType: {
-        type: String,
-        default: 'html',
-        validator: (val) => {
-          return oneOf(val, ['html', 'text'])
-        }
-      },
-      /**
+    valueType: {
+      type: String,
+      default: 'html',
+      validator: (val) => {
+        return oneOf(val, ['html', 'text'])
+      }
+    },
+    /**
        * @description 设置change事件触发时间间隔
        */
-      changeInterval: {
-        type: Number,
-        default: 200
-      },
-      /**
+    changeInterval: {
+      type: Number,
+      default: 200
+    },
+    /**
        * @description 是否开启本地存储
        */
-      cache: {
-        type: Boolean,
-        default: true
-      }
+    cache: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    editorId () {
+      return `editor${this._uid}`
+    }
+  },
+  methods: {
+    setHtml (val) {
+      this.editor.txt.html(val)
+    },
+	  getTxt () {
+      return this.editor.txt.text()
+	  },
+    getEdior () {
+      return new Editor(`#${this.editorId}`)
+    },
+    clearText () {
+      this.editor.txt.clear()
     },
-    computed: {
-      editorId () {
-        return `editor${this._uid}`
+    randomStr (len) {
+      len = len || 32
+      const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
+      const maxPos = chars.length
+      let pwd = ''
+      for (let i = 0; i < len; i++) {
+        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
       }
+      return pwd
     },
-    methods: {
-      setHtml (val) {
-        this.editor.txt.html(val)
+    createFileName (filename) {
+      const pos = filename.lastIndexOf('.')
+      const suffix = filename.substring(pos)
+      return this.randomStr(20) + suffix
+    }
+
+  },
+  mounted () {
+    const _this = this
+    this.editor = new Editor(`#${this.editorId}`)
+    this.editor.config.zIndex = 100
+    this.editor.config.onchange = (html) => {
+      const text = this.editor.txt.text()
+      if (this.cache) localStorage.editorCache = html
+      this.$emit('input', this.valueType === 'html' ? html : text)
+      this.$emit('on-change', html, text)
+    }
+    this.editor.config.onchangeTimeout = this.changeInterval
+    this.editor.config.uploadImgServer = process.env.VUE_APP_API_BASE_URL + '/upload'
+    this.editor.config.uploadFileName = 'file'
+    this.editor.config.uploadImgMaxLength = 10
+    this.editor.config.uploadImgParams = {
+      savePathType: 'ali'
+    }
+    this.editor.config.uploadImgHooks = {
+      before: function (xhr, editor, files) {
+        console.log(xhr, editor, files)
+        // 图片上传之前触发
+        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
+
+        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
+        // return {
+        //     prevent: true,
+        //     msg: '放弃上传'
+        // }
       },
-	  getTxt () {
-		return this.editor.txt.text()
-	  },
-      getEdior () {
-        return new Editor(`#${this.editorId}`)
+      success: function (xhr, editor, result) {
+        console.log(xhr, editor, result)
+        // 图片上传并返回结果,图片插入成功之后触发
+        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
       },
-      clearText () {
-        this.editor.txt.clear()
+      fail: function (xhr, editor, result) {
+        console.log(xhr, editor, result)
+        // 图片上传并返回结果,但图片插入错误时触发
+        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
       },
-      randomStr (len) {
-        len = len || 32
-        let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
-        let maxPos = chars.length
-        let pwd = ''
-        for (let i = 0; i < len; i++) {
-          pwd += chars.charAt(Math.floor(Math.random() * maxPos))
-        }
-        return pwd
+      error: function (xhr, editor) {
+        console.log(xhr, editor)
+        // 图片上传出错时触发
+        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
       },
-      createFileName (filename) {
-        let pos = filename.lastIndexOf('.')
-        let suffix = filename.substring(pos)
-        return this.randomStr(20) + suffix
-      }
-
-    },
-    mounted () {
-      let _this = this
-      this.editor = new Editor(`#${this.editorId}`)
-      this.editor.customConfig.zIndex = 100
-      this.editor.customConfig.onchange = (html) => {
-        let text = this.editor.txt.text()
-        if (this.cache) localStorage.editorCache = html
-        this.$emit('input', this.valueType === 'html' ? html : text)
-        this.$emit('on-change', html, text)
-      }
-      this.editor.customConfig.onchangeTimeout = this.changeInterval
-      this.editor.customConfig.uploadImgServer = process.env.VUE_APP_API_BASE_URL + '/upload'
-      this.editor.customConfig.uploadFileName = 'file'
-      this.editor.customConfig.uploadImgParams = {
-          savePathType: 'ali'
+      timeout: function (xhr, editor) {
+        // 图片上传超时时触发
+        // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
+      },
+      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
+      // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
+      customInsert: function (insertImg, result, editor) {
+        // console.log(insertImg, result, editor)
+        // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
+        // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
+        // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
+        insertImg(result.data)
+        // result 必须是一个 JSON 格式字符串!!!否则报错
       }
-      this.editor.customConfig.uploadImgHooks = {
-          before: function (xhr, editor, files) {
-              console.log(xhr, editor, files)
-              // 图片上传之前触发
-              // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
-              
-              // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
-              // return {
-              //     prevent: true,
-              //     msg: '放弃上传'
-              // }
-          },
-          success: function (xhr, editor, result) {
-            console.log(xhr, editor, result)
-              // 图片上传并返回结果,图片插入成功之后触发
-              // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
-          },
-          fail: function (xhr, editor, result) {
-              console.log(xhr, editor, result)
-              // 图片上传并返回结果,但图片插入错误时触发
-              // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
-          },
-          error: function (xhr, editor) {
-               console.log(xhr, editor)
-              // 图片上传出错时触发
-              // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
-          },
-          timeout: function (xhr, editor) {
-              // 图片上传超时时触发
-              // xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
-          },
-          // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
-          // (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
-          customInsert: function (insertImg, result, editor) {
-              // console.log(insertImg, result, editor)
-              // 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
-              // insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
-              // 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
-              insertImg(result.data)
-              // result 必须是一个 JSON 格式字符串!!!否则报错
-          }
-        }
-
-      // create这个方法一定要在所有配置项之后调用
-      this.editor.create()
-      this.editor.txt.clear()
-      // 如果本地有存储加载本地存储内容
-      let html = this.value || localStorage.editorCache
-      if (html) this.editor.txt.html(html)
     }
+    // create这个方法一定要在所有配置项之后调用
+    this.editor.create()
+    this.editor.txt.clear()
+    // 如果本地有存储加载本地存储内容
+    const html = this.value || localStorage.editorCache
+    if (html) this.editor.txt.html(html)
   }
+}
 </script>
 
 <style lang="less">