文本编辑添加视频文件上传

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tinymce/tinymce-vue": "^3.2.8",
+    "ali-oss": "^6.16.0",
     "ant-design-vue": "^1.7.5",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",

public/index.html

@@ -4,6 +4,8 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <!-- 播放视频不传referrer -->
+    <meta name="referrer" content="never">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>

src/api/modules/file.js

@@ -3,6 +3,10 @@ export default {
       // 上传文件
       INTERFACE_POST_FILE_UPLOAD_CSV: "admin/questions/upload",
       // 上传图片
-      INTERFACE_POST_FILE_UPLOAD_IMAGE: 'image/upload'
+      INTERFACE_POST_FILE_UPLOAD_IMAGE: 'image/upload',
+      // 获取oss写权限
+      INTERFACE_GET_ASSUME_OSS_WRITER: 'assume-oss-writer',
+      // 获取oss读权限
+      INTERFACE_GET_ASSUME_OSS_READER: 'assume-oss-reader'
     }
   };

src/components/tinymce/TinymceEditor.vue

@@ -1,12 +1,6 @@
 <template>
   <div class="tinymce-editor">
-    <Editor
-      :id="tinymceId"
-      :init="init"
-      :disabled="disabled"
-      v-model="myValue"
-      @onClick="onClick"
-    ></Editor>
+    <Editor :id="tinymceId" :init="init" :disabled="disabled" v-model="myValue" @onClick="onClick"></Editor>
   </div>
 </template>
 
@@ -26,6 +20,8 @@ import "tinymce/plugins/media"; //插入编辑媒体
 import "tinymce/plugins/wordcount"; // 字数统计
 // import Cookies from "js-cookie";
 
+const OSS = require("ali-oss");
+
 const fonts = [
   "宋体=宋体",
   "微软雅黑=微软雅黑",
@@ -78,7 +74,7 @@ export default {
     toolbar: {
       type: [String, Array],
       default:
-        "undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media" //  | lists image media table
+        "undo redo |  formatselect | colorpicker | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | image media link" //  | lists image media table
     }
   },
   data() {
@@ -106,6 +102,8 @@ export default {
         placeholder: "在这里输入文字",
         branding: false, //隐藏右下角技术支持
         link_context_toolbar: true,
+        media_dimensions:false,
+        media_alt_source:false,
         //图片上传
         images_upload_handler: function(blobInfo, success, failure) {
           //文件上传的formData传递，忘记为什么要用这个了
@@ -129,6 +127,68 @@ export default {
             });
           }
         },
+        file_picker_callback: function(callback, value, meta) {
+          //文件分类
+          var filetype =
+            ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4";
+          //后端接收上传文件的地址
+          //为不同插件指定文件类型及后端地址
+          let bucket = "jtxt-file-public";
+          let ossPath = "file/";
+          switch (meta.filetype) {
+            case "image":
+              filetype = ".jpg, .jpeg, .png, .gif";
+              ossPath = "image/";
+              break;
+            case "media":
+              bucket = "jtxt-video-public";
+              filetype = ".mp3, .mp4";
+              ossPath = "media/";
+              break;
+            case "file":
+              bucket = "jtxt-file-public";
+              filetype =
+                ".pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx";
+              ossPath = "file/";
+              break;
+            default:
+          }
+          //模拟出一个input用于添加本地文件
+          var input = document.createElement("input");
+          input.setAttribute("type", "file");
+          input.setAttribute("accept", filetype);
+          input.onchange = function(res) {
+            console.log("change----" + JSON.stringify(res));
+            let file = res.target.files[0];
+            window.$_http.get("/assume-oss-writer").then(res => {
+              console.log("--oss-writer--" + JSON.stringify(res));
+              const client = new OSS({
+                // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
+                region: "oss-cn-beijing",
+                // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
+                accessKeyId: res.data.accessKeyId,
+                accessKeySecret: res.data.accessKeySecret,
+                // 从STS服务获取的安全令牌（SecurityToken）。
+                stsToken: res.data.securityToken,
+                // 填写Bucket名称。
+                bucket: bucket
+              });
+
+              // 上传oss
+              try {
+                client.put(ossPath + file.name, file).then(res => {
+                  console.log(res);
+                });
+              } catch (e) {
+                console.error(e);
+              }
+              // 回调
+              callback("http://vfx.mtime.cn/Video/2019/03/21/mp4/190321153853126488.mp4");
+            });
+          };
+          input.click();
+        },
+
         // file_picker_callback: function(callback, value, meta, failure) {
         //   //文件分类
         //   var filetype =