feat:添加上传视频

dist/index.html

@@ -85,7 +85,7 @@
         value:
           "## edswgdfgdfgdfg\n**dfgdfgdfg**\n_ergdfgdfg_\n> ergergdfg\n```\nwefgdfsfdgdf\n```\n- efwefsdfsdf\n\n\nsdgfdfgdfgdfg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg\n\n\nedrfgdfgdfg\n\n\n\nergergergergerg\nergergergerg",
         value:
-          "[1](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)\n[](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)",
+          "![video](http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 '1.jpg')\n![video](http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 '1.jpg')\n![video](http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4 '1.jpg')",
         // value: "当前问题已结题，不再开放新的回答。",
         // value: "",
         disabled: false,
@@ -143,7 +143,13 @@
         onSubmit: function(res) {
           console.log(res);
         },
-        onUpload: function(file, callback) {
+        onUpload: function(file, type, callback) {
+          console.log(type);
+          if (type === "video") {
+            callback("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
+            return;
+          }
+
           new Promise((res, rej) => {
             setTimeout(() => {
               res(file);
@@ -156,26 +162,27 @@
             };
           });
         },
-        renderLinks: function(val, callback) {
-          setTimeout(() => {
-            val[0].title = "111111";
-            val[0].icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
-            callback(val);
-          }, 1000);
+        // renderLinks: function(val, callback) {
+        //   setTimeout(() => {
+        //     val[0].title = "111111";
+        //     val[0].icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
+        //     callback(val);
+        //   }, 1000);
 
-          setTimeout(() => {
-            val[1].title = "2222222";
-            val[1].icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
+        //   setTimeout(() => {
+        //     val[1].title = "2222222";
+        //     val[1].icon = "https://g.csdnimg.cn/static/logo/favicon32.ico";
 
-            callback(val);
-          }, 2000);
-          setTimeout(() => {
-            val[1].title = "333333333";
-            val[1].icon = "https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)\n[](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg";
+        //     callback(val);
+        //   }, 2000);
+        //   setTimeout(() => {
+        //     val[1].title = "333333333";
+        //     val[1].icon =
+        //       "https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg)\n[](https://img2.baidu.com/it/u=4025475678,645544065&fm=26&fmt=auto&gp=0.jpg";
 
-            callback(val);
-          }, 3000);
-        },
+        //     callback(val);
+        //   }, 3000);
+        // },
         queryUserList: function(val, callback) {
           const list = [
             {

src/App.vue

@@ -224,14 +224,28 @@ export default {
     },
     uploadFileCallBack() {
       const _this = this;
-      return function({ url, file: { name } }) {
-        // url = "http://www.baidu.com";
+      return function({ url, file: { name, size } }) {
         const originalText = _this.text;
         const selectionInfo = _this.selectionInfo;
         const newText = formatText(
           originalText,
           selectionInfo,
           "\n![file](",
+          `${url} '${name} ${size}')\n`
+        );
+        _this.text = newText;
+        _this.$refs.mdUploadFile.value = "";
+      };
+    },
+    uploadVideoCallBack() {
+      const _this = this;
+      return function({ url, file: { name } }) {
+        const originalText = _this.text;
+        const selectionInfo = _this.selectionInfo;
+        const newText = formatText(
+          originalText,
+          selectionInfo,
+          "\n![video](",
           `${url} '${name}')\n`
         );
         _this.text = newText;
@@ -361,9 +375,12 @@ export default {
         if (!val.length) return;
         this.$emit("upload", {
           val: val[0],
+          type: uploadType,
           callback:
             uploadType === "img"
               ? this.uploadImgCallBack
+              : uploadType === "video"
+              ? this.uploadVideoCallBack
               : this.uploadFileCallBack
         });
         this.fileList = [];

src/assets/js/utils.js

 import marked from "marked";
+import videojs from "video.js";
+import "video.js/dist/video-js.min.css";
 // 获取选中文本信息
 
 export function getSelectionInfo(selectorId) {
@@ -412,3 +414,55 @@ export function preventDefault(id) {
   }, 0);
   return;
 }
+
+export async function renderVideo(id, html) {
+  const virtualDom = document.createElement("div");
+  virtualDom.innerHTML = html;
+  document.body.appendChild(virtualDom);
+  const videoList = Array.from(virtualDom.getElementsByTagName("video"));
+
+  const newHtml = await new Promise((resolve, rej) => {
+    videoList.forEach(item => {
+      console.log(item);
+      item.setAttribute("controls", "controls");
+    });
+    setTimeout(() => {
+      const newHtml = virtualDom.innerHTML;
+      resolve(newHtml);
+      // document.body.removeChild(virtualDom);
+    }, 5000);
+  });
+  console.log(newHtml);
+  // if (newHtml) {
+  return newHtml;
+  // }
+}
+
+// 获取方法参数名
+export function getParameterName(fn) {
+  if (typeof fn !== "object" && typeof fn !== "function") return;
+  const COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
+  const DEFAULT_PARAMS = /=[^,)]+/gm;
+  const FAT_ARROWS = /=>.*$/gm;
+  let code = fn.prototype ? fn.prototype.constructor.toString() : fn.toString();
+  code = code
+    .replace(COMMENTS, "")
+    .replace(FAT_ARROWS, "")
+    .replace(DEFAULT_PARAMS, "");
+  let result = code
+    .slice(code.indexOf("(") + 1, code.indexOf(")"))
+    .match(/([^\s,]+)/g);
+  return result === null ? [] : result;
+}
+
+export function getfilesize(size) {
+  if (!size || isNaN(size)) return size;
+  var num = 1024.0; //byte
+  if (size < num) return size + "B";
+  if (size < Math.pow(num, 2)) return (size / num).toFixed(2) + "K"; //kb
+  if (size < Math.pow(num, 3))
+    return (size / Math.pow(num, 2)).toFixed(2) + "M"; //M
+  if (size < Math.pow(num, 4))
+    return (size / Math.pow(num, 3)).toFixed(2) + "G"; //G
+  return (size / Math.pow(num, 4)).toFixed(2) + "T"; //T
+}

src/assets/style/iconfont.less

@@ -118,3 +118,7 @@
 .icon-xiazai:before {
   content: "\e6be";
 }
+
+.icon-shipin:before {
+  content: "\e63c";
+}

src/components/content/md-preview.vue

@@ -10,7 +10,6 @@
   </div>
 </template>
 <script>
-import marked from "marked";
 export default {
   data() {
     return {};
@@ -32,7 +31,7 @@ export default {
       default: 0
     },
     html: {
-      type: String,
+      type: [String, Promise],
       default: ""
     },
     fullScreen: {

src/components/content/md-textarea.vue

@@ -71,7 +71,7 @@ export default {
       default: ""
     },
     html: {
-      type: String,
+      type: [String, Promise],
       default: ""
     },
     htmlMinHeight: {
@@ -298,7 +298,7 @@ export default {
       this.emitText();
     },
     blur() {
-      this.renderUserTags()
+      this.renderUserTags();
       this.setFocus(false);
     },
     createHideEl(type) {

src/components/content/mixins/render-mixins.js

@@ -2,13 +2,15 @@ import {
   getFilteredTags,
   getLinkTags,
   addLanguageClass,
-  addLinkTarget
+  addLinkTarget,
+  renderVideo,
+  getfilesize
 } from "@/assets/js/utils";
 import marked from "marked";
 import DOMPurify from "dompurify";
 export default {
   methods: {
-    transferMarkdown(val) {
+    async transferMarkdown(val) {
       this.rerender();
       marked.setOptions({
         breaks: true,
@@ -37,9 +39,10 @@ export default {
       // 链接转换为卡片
       const { vDom, links } = getLinkTags(this.id, cleanHtml);
       const { callUserList, userHtml } = addLinkTarget(cleanHtml);
+      const videoHtml = await renderVideo(this.id, userHtml);
       this.$emit("callUserList", callUserList);
       this.$emit("getFilteredTags", filteredTags);
-      this.$emit("update:html", userHtml);
+      this.$emit("update:html", videoHtml);
       if (links.length) this.$emit("renderLinksHtml", { vDom, links });
     },
     rerender() {
@@ -49,14 +52,19 @@ export default {
           if (href === null) {
             return text;
           }
+          const size = title.split(" ").pop();
+          const name = title
+            .split(" ")
+            .slice(0, -1)
+            .join(" ");
           // ![file](...)渲染文件，只可以下载
           if (text === "file") {
             return `<div id="md_file_card" class="md_file_card">
               <div class="md_flex_card">
                 <span class="md_file_img icon iconfont icon-doc"></span>
                 <span class="flex-1">
-                  <span class="md_file_title">${title}</span>
-                  <span class="md_file_desc">16.6KB</span>
+                  <span class="md_file_title">${name}</span>
+                  <span class="md_file_desc">${getfilesize(size)}</span>
                 </span>
                 <span class="md_file_controls">
                 <a href="${href}" type="file" download class="md_file_download icon iconfont icon-xiazai"></a>
@@ -64,6 +72,15 @@ export default {
               </div>
             </div>`;
           }
+          if (text === "video") {
+            return `<video
+                class="video-js"
+                controls
+                preload="auto"
+                data-setup='{}'>
+              <source src="${href}" type="video/mp4"></source>
+            </video>`;
+          }
           // ![img](...)渲染图片
           let out = '<img src="' + href + '" alt="' + text + '"';
           if (title) {

src/components/header/components/tool-button.vue

@@ -164,6 +164,12 @@ export default {
         case "file":
           this.$emit("upload", "file");
           break;
+        case "video":
+          this.$emit("upload", "video");
+          break;
+        case "file":
+          this.$emit("upload", "file");
+          break;
         case "fullScreen":
           this.$emit("setFullScreen", true);
           break;
@@ -218,7 +224,8 @@ export default {
     &.icon-lianjie {
       font-size: 16px;
     }
-    &.icon-help {
+    &.icon-help,
+    &.icon-wenjian {
       font-size: 19px;
     }
   }

src/components/header/md-header.vue

@@ -237,6 +237,13 @@ export default {
           startStr: "",
           endStr: ""
         },
+        {
+          name: "video",
+          icon: "shipin",
+          tip: "上传视频",
+          startStr: "",
+          endStr: ""
+        },
         {
           name: "task",
           icon: "renwu",

src/main.js

@@ -2,7 +2,12 @@ import Vue from "vue";
 import App from "./App";
 import Vtip from "vtip";
 import "vtip/lib/index.min.css";
-import { initStyle, setzIndex, isNotEmpty } from "@/assets/js/utils";
+import {
+  initStyle,
+  setzIndex,
+  isNotEmpty,
+  getParameterName
+} from "@/assets/js/utils";
 import "@/assets/style/global.less";
 Vue.use(Vtip.directive);
 
@@ -105,15 +110,23 @@ function initMdEditor(obj) {
     submit(val) {
       onSubmit(val);
     },
-    upload({ val, callback }) {
-      console.log(val);
-
-      onUpload(val, function(res) {
-        callback({
-          url: res,
-          file: val
+    upload({ val, type, callback }) {
+      const params = getParameterName(onUpload);
+      if (!params.includes("type")) {
+        onUpload(val, function(res) {
+          callback({
+            url: res,
+            file: val
+          });
         });
-      });
+      } else {
+        onUpload(val, type, function(res) {
+          callback({
+            url: res,
+            file: val
+          });
+        });
+      }
     },
     renderLinks({ links, callback }) {
       if (!renderLinks) return callback(links);