'normal'

src/components/Tinymce/components/EditorFile.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click="dialogVisible=true">
+      文章附件
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload
+        ref="upload"
+        :limit="1"
+        :action="action"
+        :auto-upload="true"
+        :show-file-list="false"
+        :headers="headers"
+        class="editor-slide-upload"
+        :before-upload="uploadBefore"
+        :on-success="uploadSuccess"
+        :on-change="handleChange"
+      >
+        <el-button size="small" type="primary">
+          点击上传
+        </el-button>
+      </el-upload>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { authDB } from '@/db'
+
+export default {
+  name: 'EditorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#1890ff'
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: [],
+      headers:{
+        'x-token': authDB.get('token'),
+        'x-user-id': authDB.get('uid')
+      },
+    }
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
+      // if (!this.checkAllSuccess()) {
+      //   this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
+      //   return
+      // }
+      // console.log( "this.listObj", this.listObj)
+      this.$emit('successCBK', arr)
+      this.listObj = {}
+      this.fileList = []
+      this.dialogVisible = false
+    },
+    handleSuccess(response, file) {
+      const uid = response.data.filename
+      this.listObj[uid] = {
+        uid,
+        hasSuccess: true,
+        width: file.width,
+        height: file.height,
+        url : "http://smoa.ndjsxh.cn:8888/preview/"+ uid
+        // url : "http://localhost:8000/api/preview/"+ uid
+      }
+    },
+    handleRemove(file) {
+      const uid = file.uid
+      const objKeyArr = Object.keys(this.listObj)
+      for (let i = 0, len = objKeyArr.length; i < len; i++) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]]
+          return
+        }
+      }
+    },
+    beforeUpload(file) {
+      const _self = this
+      const _URL = window.URL || window.webkitURL
+      const fileName = file.uid
+      return new Promise((resolve, reject) => {
+        const img = new Image()
+        img.src = _URL.createObjectURL(file)
+        // img.onload = function() {
+        //   _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+        // }
+        resolve(true)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.editor-slide-upload {
+  margin-bottom: 20px;
+  ::v-deep .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>

src/components/Tinymce/index.vue

@@ -2,7 +2,24 @@
   <div :class="{fullscreen:fullscreen}" class="tinymce-container" :style="{width:containerWidth}">
     <textarea :id="tinymceId" class="tinymce-textarea" />
     <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK" />
+
+      <el-upload
+        ref="upload"
+        :limit="1"
+        action="/api/artical/uploadFile"
+        :auto-upload="true"
+        :show-file-list="false"
+        :headers="headers"
+        class="editor-upload-btn mlr10"
+        :before-upload="uploadBefore"
+        :on-success="uploadSuccess"
+      >
+        <el-button size="small" type="primary" >
+          添加附件
+        </el-button>
+      </el-upload>
+
+      <editorImage color="#1890ff" class="editor-upload-btn mlr10" @successCBK="imageSuccessCBK" />
     </div>
   </div>
 </template>
@@ -13,6 +30,7 @@
  * https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html#tinymce
  */
 import editorImage from './components/EditorImage'
+import editorFile from './components/EditorFile'
 import plugins from './plugins'
 import toolbar from './toolbar'
 import load from './dynamicLoadScript'
@@ -24,7 +42,7 @@ const tinymceCDN = 'https://cdn.jsdelivr.net/npm/tinymce-all-in-one@4.9.3/tinymc
 
 export default {
   name: 'Tinymce',
-  components: { editorImage },
+  components: { editorImage, editorFile },
   props: {
     id: {
       type: String,
@@ -116,8 +134,6 @@ export default {
   },
   methods: {
     init() {
-      // this.initTinymce()
-      // dynamic load tinymce from cdn
       load(tinymceCDN, (err) => {
         if (err) {
           this.$message.error(err.message)
@@ -222,6 +238,22 @@ export default {
         tinymce.destroy()
       }
     },
+    uploadBefore(file) {
+      const maxSize = file.size / 1024 / 1024 < 20;
+      if (!maxSize) {
+        this.$message.error('每个文件最大20M');
+      }
+      return maxSize;
+    },
+    uploadSuccess(res, file) {
+      console.log( res, file.name )
+      if (res.code === 200) {
+        window.tinymce.get(this.tinymceId).insertContent(
+        `<a target="_blank" style="cursor:hand;color:blue" href="http://smoa.ndjsxh.cn:8888/preview/${res.data.filename}">${file.name}</a></br>`)
+      } else {
+        this.$message.error('图片上传失败')
+      }
+    },
     onPaste(e) {
       var items=e.clipboardData.items;
       var item = items[0];
@@ -288,4 +320,6 @@ export default {
 .editor-upload-btn {
   display: inline-block;
 }
+
+.mlr10{ margin-left: 10px; margin-right: 10px;}
 </style>

src/pages/other/file-add.vue

@@ -75,6 +75,11 @@
                 预览附件
               </el-button>
 
+
+              <el-button type="primary" @click="gotoDetail(info )" v-if="info.articalId>0" class="btn-md">
+                查看文件
+              </el-button>
+
           </el-form-item>
 
       </el-form>
@@ -203,6 +208,10 @@
       preview(filename){
         window.open( "http://smoa.ndjsxh.cn:8888/preview/"+filename)
       },
+      gotoDetail(info){
+        let query= {articalId: info.articalId }
+        this.$router.push( {path: '/file-info', query})
+      },
       onSubmit(){
         this.$refs["elForm"].validate((valid) => {
           if (!valid) return;