编辑器增加视频上传功能

zyd_public/WangEditor/PdfMenu.js → zyd_public/WangEditor/DiyMenu/PdfMenu.js

 // https://www.wangeditor.com/v4/pages/02-%E5%86%85%E5%AE%B9%E5%A4%84%E7%90%86/02-%E8%BF%BD%E5%8A%A0%E6%96%B0%E5%86%85%E5%AE%B9.html
 import Editor from '@/webPublic/zyd_public/WangEditor/includes/wangEditor.min';
 import { message } from 'antd';
-import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
+import { uploadFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
 import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
 
 const E = Editor;
 const { BtnMenu } = E;
 window.message = message;
 
-export default class AlertMenu extends BtnMenu {
+export default class PdfMenu extends BtnMenu {
   constructor(editor) {
     // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
     const $elem = E.$(

zyd_public/WangEditor/DiyMenu/VideoMenu.js

+/**
+ * 视频上传组件
+ * wangEditor http://www.wangeditor.com/  将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
+ *
+ * */
+import Editor from '@/webPublic/zyd_public/WangEditor/includes/wangEditor.min';
+import { message } from 'antd';
+import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
+import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
+import videoSvg from './video.svg';
+
+const E = Editor;
+const { BtnMenu } = E;
+window.message = message;
+
+export default class VideoMenu extends BtnMenu {
+  constructor(editor) {
+    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
+    const $elem = E.$(
+      `<div class='w-e-menu' data-title='Alert' style='position: relative;'>
+<img src='${videoSvg}' alt='video' style='width: 18px;height: 18px;'/>
+</div>`,
+    );
+    super($elem, editor);
+  }
+
+  // 菜单点击事件
+  clickHandler() {
+    // 做任何你想做的事情
+    // 可参考【常用 API】文档，来操作编辑器
+    let dom = document.createElement('input');
+    dom.accept = '.MP4,.Ogg,.WebM,.WAV';
+    dom.type = 'file';
+    dom.onchange = (v) => {
+      console.log(v);
+      if (dom.files && dom.files.length) {
+        window.message.info('正在上传文件, 请耐心等待');
+        const file = dom.files[0];
+        console.log(file);
+        const fileName = file.name;
+        uploadFile(file).then((res) => {
+          if (res && res.length > 10) {
+            let url = queryApiActionPath() + res;
+            window.message.success('上传文件成功');
+            console.log(this);
+            this.editor.txt.append(`
+<p class='wangEditor-videoReader' style='text-align: center;'>
+<video
+      src='${url}'
+      style='max-height: 500px; max-width:100%;'
+      controls='true'
+      controlsList="nodownload noplaybackrate"
+      disablePictureInPicture='true'
+  />
+</p>
+<p class='wangEditor-aHref'><a href='${url}' target='_blank' download='${fileName}'>${fileName}</a></p>`);
+          }
+        });
+      }
+    };
+    dom.click();
+  }
+
+  // 菜单是否被激活（如果不需要，这个函数可以空着）
+  // 1. 激活是什么？光标放在一段加粗、下划线的文本时，菜单栏里的 B 和 U 被激活，如下图
+  // 2. 什么时候执行这个函数？每次编辑器区域的选区变化（如鼠标操作、键盘操作等），都会触发各个菜单的 tryChangeActive 函数，重新计算菜单的激活状态
+  tryChangeActive() {
+    // 激活菜单
+    // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
+    // 2. this.this.isActive === true
+    this.active();
+
+    // // 取消激活菜单
+    // // 1. 菜单 DOM 节点会删掉 .w-e-active
+    // // 2. this.this.isActive === false
+    // this.unActive()
+  }
+}

zyd_public/WangEditor/DiyMenu/video.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1653099398989" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1266" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M912 302.3L784 376V224c0-35.3-28.7-64-64-64H128c-35.3 0-64 28.7-64 64v576c0 35.3 28.7 64 64 64h592c35.3 0 64-28.7 64-64V648l128 73.7c21.3 12.3 48-3.1 48-27.6V330c0-24.6-26.7-40-48-27.7zM712 792H136V232h576v560z m176-167l-104-59.8V458.9L888 399v226z" p-id="1267" fill="#8a8a8a"></path><path d="M208 360h112c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H208c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" p-id="1268" fill="#8a8a8a"></path></svg>
\ No newline at end of file

zyd_public/WangEditor/OneStopWangEditor.js

@@ -17,7 +17,8 @@ import React, { useState, useEffect } from 'react';
 import WangEditor from './includes/wangEditor.min';
 import { uploadFile } from "@/webPublic/one_stop_public/libs/PictureSignature/ShowItem";
 import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
-import PdfMenu from '@/webPublic/zyd_public/WangEditor/PdfMenu';
+import PdfMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/PdfMenu';
+import VideoMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/VideoMenu';
 let editor = null;
 
 
@@ -34,11 +35,9 @@ export default function Index({
                                 menus,
                               }) {
   useEffect(() => {
-    // const menuKey = 'PdfMenuKey';
-    // WangEditor.registerMenu(menuKey, PdfMenu);
     editor = new WangEditor(`#wangEditor${domKey}`);
-    const menuKey = 'PdfMenuKey';
-    editor.menus.extend(menuKey, PdfMenu);
+    editor.menus.extend('PdfMenuKey', PdfMenu);
+    editor.menus.extend('video', VideoMenu);
     editor.config.zIndex = 20;
     if (height) {
       editor.config.height = height; // 编辑器高度

zyd_public/WangEditor/wangEditorComponent.js

@@ -17,10 +17,10 @@ import React, { useState, useEffect } from 'react';
 import WangEditor from './includes/wangEditor.min';
 import uploadFile from './uploadFile';
 import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
-import PdfMenu from '@/webPublic/zyd_public/WangEditor/PdfMenu';
-
+import PdfMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/PdfMenu';
+import VideoMenu from '@/webPublic/zyd_public/WangEditor/DiyMenu/VideoMenu';
 let editor = null;
-export default function Index({
+export default function ZydCmsWangEditor({
 	height,
 	zIndex,
 	placeholder,
@@ -31,8 +31,8 @@ export default function Index({
 }) {
 	useEffect(() => {
 		editor = new WangEditor(`#wangEditor${domKey}`);
-    const menuKey = 'PdfMenuKey';
-    editor.menus.extend(menuKey, PdfMenu);
+    editor.menus.extend('PdfMenuKey', PdfMenu);
+    editor.menus.extend('video', VideoMenu);
     editor.config.zIndex = 20;
     if (height) {
 			editor.config.height = height; // 编辑器高度
@@ -69,7 +69,8 @@ export default function Index({
 		editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
 		editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
 		editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
-		editor.config.menus = [
+    // editor.config.uploadImgShowBase64 = true;
+    editor.config.menus = [
 			// 配置菜单
 			'head',
 			'bold',