WangEditor 增加pdf 阅读功能

zyd_public/WangEditor/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/zyd_public/WangEditor/uploadFile';
 
 const E = Editor;
 const { BtnMenu } = E;
-console.log(BtnMenu);
-
-/**
- <input
- style={inputStyle}
- type='file'
- accept='.pdf'
- onChange={handleVideo}
- />
- *
- * */
-
-const inputStyle = {
-  opacity: 0,
-  display: 'absolute',
-  top: 0,
-  left: 0,
-  width: 18,
-  height: 18,
-};
+window.message = message;
 
 export default class AlertMenu extends BtnMenu {
   constructor(editor) {
@@ -35,19 +19,7 @@ export default class AlertMenu extends BtnMenu {
            fill='currentColor'
            >
 <path d='M905 179q-10-10-22-21-36-33-67-62-3-2-5-4-45-41-71-63-16-13-25-19-6-5-11-7-6-3-13-3-10 0-17.5 7.5T666 26v230h230l-26-25v767l26-25H230q-31 0-53.5-22.5T154 896V26l-26 26h461q10 0 17.5-7.5t7.5-18-7.5-18T589 1H102v895q0 53 37.5 90.5T230 1024h692V205H691l26 26V26q0 10-7.5 17.5T692 51q-5 0-9-2l2 2q7 5 22 17 25 22 69 62 3 2 5 4 31 28 67 62 12 10 22 20 6 5 8 8 8 7 18.5 7t18-8 7-18.5T914 187q-4-3-9-8zM102 461H0v435h1024V461H102z m106 250v108h-50V528h111q49 0 77.5 25.5T375 621t-28 66-79 24h-60z m0-41h61q27 0 41-12.5t14-36.5-14-38-40-14h-62v101z m211 149V528h86q39 0 69 17t46.5 49 16.5 72v15q0 41-16.5 72.5t-47 48.5-70.5 17h-84z m51-250v210h33q40 0 61-25t22-72v-16q0-47-20.5-72T505 569h-35z m385 127H738v123h-51V528h185v41H738v86h117v41z' />
-</svg>
-<input
-accept='.pdf'
-type='file'
-style='
-position: absolute;
-opacity: 0;
-top: 0;
- left: 0;
-    width: 18px;
-     height: 18px;
-     '/>
-            </div>`,
+</svg></div>`,
     );
     super($elem, editor);
   }
@@ -56,7 +28,37 @@ top: 0;
   clickHandler() {
     // 做任何你想做的事情
     // 可参考【常用 API】文档，来操作编辑器
-    alert('hello world');
+    let dom = document.createElement('input');
+    dom.accept = '.pdf';
+    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: file }).then((res) => {
+          if (res && res.url) {
+            window.message.success('上传文件成功');
+            console.log(this);
+            this.editor.txt.append(`
+<p>
+<embed width='100%'
+       height='768px'
+       name='plugin'
+       id='plugin'
+       src='${res.url}'
+       type='application/pdf'
+       internalinstanceid='3'
+       title='${fileName}'/>
+</p>
+<p><a href='${res.url}' target='_blank'>${fileName}</a></p>`);
+          }
+        });
+      }
+    };
+    dom.click();
   }
 
   // 菜单是否被激活（如果不需要，这个函数可以空着）

zyd_public/WangEditor/wangEditorComponent.js

@@ -30,7 +30,6 @@ export default function Index({
 	onChangeValue,
 }) {
 	useEffect(() => {
-    console.log(WangEditor.prototype);
 		editor = new WangEditor(`#wangEditor${domKey}`);
     const menuKey = 'PdfMenuKey';
     editor.menus.extend(menuKey, PdfMenu);