feat: 富文本图片上传

package-lock.json

@@ -12,7 +12,6 @@
         "@antv/g2": "4.2.4",
         "@babel/polyfill": "7.0.0",
         "@babel/runtime": "7.2.0",
-        "@tinymce/tinymce-vue": "2.1.0",
         "ant-design-vue": "1.7.8",
         "axios": "0.18.0",
         "dayjs": "1.7.7",
@@ -23,7 +22,6 @@
         "lodash.pick": "4.4.0",
         "nprogress": "0.2.0",
         "simple-lightbox": "^2.1.0",
-        "tinymce": "5.0.8",
         "vue": "2.6.11",
         "vue-ls": "3.2.0",
         "vue-router": "3.0.1",
@@ -1730,13 +1728,6 @@
         "url": "https://opencollective.com/core-js"
       }
     },
-    "node_modules/@tinymce/tinymce-vue": {
-      "version": "2.1.0",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "vue": "^2.5.17"
-      }
-    },
     "node_modules/@types/d3-timer": {
       "version": "2.0.1",
       "license": "MIT"
@@ -12726,10 +12717,6 @@
         "node": "*"
       }
     },
-    "node_modules/tinymce": {
-      "version": "5.0.8",
-      "license": "LGPL-2.1"
-    },
     "node_modules/tmp": {
       "version": "0.0.33",
       "dev": true,
@@ -15611,12 +15598,6 @@
         }
       }
     },
-    "@tinymce/tinymce-vue": {
-      "version": "2.1.0",
-      "requires": {
-        "vue": "^2.5.17"
-      }
-    },
     "@types/d3-timer": {
       "version": "2.0.1"
     },
@@ -23319,9 +23300,6 @@
     "tinycolor2": {
       "version": "1.4.2"
     },
-    "tinymce": {
-      "version": "5.0.8"
-    },
     "tmp": {
       "version": "0.0.33",
       "dev": true,

package.json

@@ -15,7 +15,6 @@
     "@antv/g2": "4.2.4",
     "@babel/polyfill": "7.0.0",
     "@babel/runtime": "7.2.0",
-    "@tinymce/tinymce-vue": "2.1.0",
     "ant-design-vue": "1.7.8",
     "axios": "0.18.0",
     "dayjs": "1.7.7",
@@ -26,7 +25,6 @@
     "lodash.pick": "4.4.0",
     "nprogress": "0.2.0",
     "simple-lightbox": "^2.1.0",
-    "tinymce": "5.0.8",
     "vue": "2.6.11",
     "vue-ls": "3.2.0",
     "vue-router": "3.0.1",

src/components/image-upload/ImageUpload.vue

@@ -146,7 +146,6 @@ export default {
      * @returns 图片url数组
      * */
     getValue() {
-      console.info(this.imageList)
       return this.getImageUrlList(this.imageList)
     }
   },

src/components/richtext/richtext-editor.vue

@@ -30,7 +30,7 @@ export default {
     },
     isSessionStorage: {
       type: Boolean,
-      default: () => false
+      default: () => true
     }
   },
 
@@ -83,13 +83,12 @@ export default {
       editor.config.uploadFileName = 'files' // formdata中的name属性
       var token = ''
       if (this.isSessionStorage) {
-        token = sessionStorage.getItem('token')
+        token = sessionStorage.getItem('Access-Token')
       } else {
-        token = localStorage.getItem('token')
+        token = localStorage.getItem('Access-Token')
       }
       editor.config.uploadImgHeaders = {
-        // todo 设置请求头
-
+        // 设置请求头
         Authorization: token // 设置请求头
       }
       // 设置高度

src/components/richtext/tinymce-editor.vue

-<template>
-  <div class="tinymce-editor">
-    <editor
-      v-model="myValue"
-            :init="init"
-    >
-    </editor>
-  </div>
-</template>
-<script>
-  import {axios} from '@/util/axios/request'
-  import tinymce from 'tinymce/tinymce'
-  import Editor from '@tinymce/tinymce-vue'
-  import 'tinymce/themes/silver'
-  // // 编辑器插件plugins
-  // import 'tinymce/themes/modern/theme'
-  import 'tinymce/plugins/image'
-  import 'tinymce/plugins/media'
-  import 'tinymce/plugins/table'
-  import 'tinymce/plugins/lists'
-  import 'tinymce/plugins/wordcount'
-  import 'tinymce/plugins/colorpicker'
-
-  const initParam = {
-    language_url: '/tinymce/langs/zh_CN.js',
-    language: 'zh_CN',
-    skin_url: '/tinymce/skins/ui/oxide',
-    height: 600,
-    plugins: `lists image media table wordcount `,
-    paste_auto_cleanup_on_paste : true,
-    paste_remove_styles: true,
-    paste_remove_styles_if_webkit: true,
-    paste_strip_class_attributes: true,
-    toolbar: `undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table | removeformat`,
-
-    fontsize_formats: "8px 10px 12px 14px 16px 18px 24px 36px",
-    lineheight_formats: "8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 22pt 24pt 26pt 36pt",
-    content_style: `
-            *                         { padding:0; margin:0; }
-            html, body                { height:100%; }
-            img                       { max-width:100%; display:block;height:auto; }
-            a                         { text-decoration: none; }
-            iframe                    { width: 100%; }
-            p                         { line-height:1.6; margin: 0px; }
-            table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
-            .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
-            ul,ol                     { list-style-position:inside; }
-          `,
-    style_formats: [
-      {
-        title: '首行缩进',
-        block: 'p',
-        styles: { 'text-indent': '2em' }
-      },
-      {
-        title: '行高',
-        items: [
-          { title: '1', styles: { 'line-height': '1' }, inline: 'span' },
-          { title: '1.5', styles: { 'line-height': '1.5' }, inline: 'span' },
-          { title: '2', styles: { 'line-height': '2' }, inline: 'span' },
-          { title: '2.5', styles: { 'line-height': '2.5' }, inline: 'span' },
-          { title: '3', styles: { 'line-height': '3' }, inline: 'span' }
-        ]
-      }
-    ],
-    font_formats: `
-            微软雅黑=微软雅黑;
-            宋体=宋体;
-            黑体=黑体;
-            仿宋=仿宋;
-            楷体=楷体;
-            隶书=隶书;
-            幼圆=幼圆;
-            Andale Mono=andale mono,times;
-            Arial=arial, helvetica,
-            sans-serif;
-            Arial Black=arial black, avant garde;
-            Book Antiqua=book antiqua,palatino;
-            Comic Sans MS=comic sans ms,sans-serif;
-            Courier New=courier new,courier;
-            Georgia=georgia,palatino;
-            Helvetica=helvetica;
-            Impact=impact,chicago;
-            Symbol=symbol;
-            Tahoma=tahoma,arial,helvetica,sans-serif;
-            Terminal=terminal,monaco;
-            Times New Roman=times new roman,times;
-            Trebuchet MS=trebuchet ms,geneva;
-            Verdana=verdana,geneva;
-            Webdings=webdings;
-            Wingdings=wingdings,zapf dingbats`,
-    branding: false,
-    menubar: false,
-    images_upload_handler: function (blobInfo, success, failure) {
-      let formdata = new FormData()
-      formdata.set('file', blobInfo.blob())
-      axios({
-        url: '/common/upload/file/richText/img',
-        method: 'post',
-        data: formdata,
-      }).then(resp => {
-        if (resp && resp.code == SYS_CONST.REQUEST.SUCCEED) {
-          success(resp.data.url)
-        } else {
-          failure('error' + resp)
-        }
-      })
-    }
-  }
-
-  export default {
-    components: {
-      Editor
-    },
-    props: {
-      value: {
-        type: String,
-        default: ''
-      },
-    },
-    data () {
-      return {
-        init: initParam,
-        myValue: this.value,
-      }
-    },
-    mounted () {
-      tinymce.init({})
-    },
-    methods: {
-      // // 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
-      // // 需要什么事件可以自己增加
-      // onClick (e) {
-      //   this.$emit('onClick', e, tinymce)
-      // },
-      // // 可以添加一些自己的自定义事件，如清空内容
-      // clear () {
-      //   this.myValue = ''
-      // }
-      // show(content){
-      //   this.$nextTick(() => {
-      //     this.$emit('input', content);
-      //   });
-      //   this.$emit('input', content);
-      // }
-    },
-    watch: {
-      value (newValue) {
-        this.myValue = newValue
-      },
-      myValue (newValue) {
-        this.$emit('input', newValue)
-      }
-    }
-  }
-
-</script>