Merge branch 'master' of http://scjoyedu.eicp.net:9121/front-team/webPublic

zyd_public/WangEditor/WangEditor5/DiyMenu/pdfMenu.js

+import { uploadFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
+import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
+import { message } from 'antd';
+import { isJSON } from '@/webPublic/one_stop_public/tableCompon/Split_Index/staticInfo';
+
+class MyMenu {
+  constructor() {
+    this.title = 'pdf上传';
+    this.iconSvg = `<svg viewBox='0 0 1024 1024'
+           xmlns='http://www.w3.org/2000/svg'
+           width='18'
+           height='18'
+           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>`;
+    this.tag = 'button';
+  }
+
+  getValue(editor) {
+    return '';
+  }
+
+  isActive(editor) {
+    return false; // or false
+  }
+
+  isDisabled(editor) {
+    return false; // or true
+  }
+
+  exec(editor, value) {
+    console.log('exec', editor);
+    let dom = document.createElement('input');
+    dom.accept = '.pdf';
+    dom.type = 'file';
+    dom.onchange = (v) => {
+      console.log(v);
+      if (dom.files && dom.files.length) {
+        message.info('正在上传文件, 请耐心等待');
+        const file = dom.files[0];
+        console.log(file);
+        const fileName = file.name;
+        uploadFile(file)
+          .then((res) => {
+            setTimeout(() => {
+              if (res && typeof res === 'string' && res.length > 10 && res.indexOf('errMsg') <= -1) {
+                let url = queryApiActionPath() + res;
+                message.success('上传文件成功');
+                const v = `<p class='wangEditor-pdfReader'><embed width='100%'
+                                     height='768px'
+                                     name='plugin'
+                                     id='plugin'
+                                     src='${url}'
+                                     type='application/pdf'
+                                     internalinstanceid='3'
+                                     title='${fileName}'/>
+                              </p>
+                              <p class='wangEditor-aHref'>
+                              <a href='${url}'
+                                 target='_blank'
+                                 download='${fileName}'>
+                                ${fileName}
+                              </a></p>`;
+                editor.dangerouslyInsertHtml(v); //
+              }else{
+                let text = '上传文件失败';
+                if(isJSON(res)){
+                  text = text + ',' + JSON.parse(res).errMsg;
+                }
+                editor.dangerouslyInsertHtml(`<a href="123123">123123</a>`); //
+                message.error(text);
+              }
+            }, 2000);
+
+          });
+      }
+    };
+    dom.click();
+
+  }
+}
+
+const myMenuConf = {
+  key: 'myMenu',
+  factory() {
+    return new MyMenu();
+  },
+};
+export default myMenuConf;

zyd_public/WangEditor/WangEditor5/ReactComponent.js

 /**
  *
-
  * WangEditor5的使用
  * 2022年6月21日
- * 官方文档 https://www.wangeditor.com/v5/getting-started.html
- * 将github 的源代码 下载下来 并执行
- * npm install
- * 再在 git bash 中执行
- * npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
- * 2022年6月25日 解决了上传图片功能
- * TODO 无法创建自定义菜单 (Pdf上传功能, 视频上传功能);
- * TODO https://github.com/wangeditor-team/wangEditor/issues/4465 使用这里面说的建立自定义菜单
- * 2022年7月5日 改为异步加载依赖 保证功能正常；
- * */
-
-/**
- *  * 所有的菜单
- // toolbarKeys: [
- //   'bold', 'underline',
- //   'italic', 'through',
- //   'code', 'sub',
- //   'sup', 'clearStyle',
- //   'color', 'bgColor',
- //   'fontSize', 'fontFamily',
- //   'indent', 'delIndent',
- //   'justifyLeft', 'justifyRight',
- //   'justifyCenter', 'justifyJustify',
- //   'lineHeight', 'insertImage',
- //   'deleteImage', 'editImage',
- //   'viewImageLink', 'imageWidth30',
- //   'imageWidth50', 'imageWidth100',
- //   'divider', 'emotion',
- //   'insertLink', 'editLink',
- //   'unLink', 'viewLink',
- //   'codeBlock', 'blockquote',
- //   'headerSelect', 'header1',
- //   'header2', 'header3',
- //   'header4', 'header5',
- //   'todo', 'redo', 'undo',
- //   'fullScreen', 'enter',
- //   'bulletedList', 'numberedList',
- //   'insertTable', 'deleteTable',
- //   'insertTableRow', 'deleteTableRow',
- //   'insertTableCol', 'deleteTableCol',
- //   'tableHeader', 'tableFullWidth',
- //   'insertVideo', 'uploadVideo',
- //   'editVideoSize', 'uploadImage',
- //   'codeSelectLang',
- // ],
+ * TODO pdfMenu 插入 的时候 无法插入 <embed 标签 需要求助 2022年7月14日
  * */
 
 import styles from './css/style.less';
@@ -56,36 +11,36 @@ import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
 import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
 import { uploadFile as uploadOnestopFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
 import loadCss from '@/webPublic/zyd_public/WangEditor/WangEditor5/css/cssLoader';
+import myMenuConf from '@/webPublic/zyd_public/WangEditor/WangEditor5/DiyMenu/pdfMenu';
+let editor = null;
 
-export default function PrepareShow(props){
-  const [show, setShow]= useState(false);
+export default function PrepareShow(props) {
+	const [show, setShow] = useState(false);
 	const WangEditor5 = useRef();
-  useEffect(()=> {
-    import('./index.esm').then((res) => { // 异步加载这个js。 因为js 过大影响性能
-      loadCss().then((cssRes) => { // 异步加载这个css 文件
+	useEffect(() => {
+		import('./index.esm').then((res) => {
+			// 异步加载这个js。 因为js 过大影响性能
+			loadCss().then((cssRes) => {
+				// 异步加载这个 wangEditor5 的css 文件
+        console.log('123');
 				WangEditor5.current = res;
-        console.log(WangEditor5);
+        WangEditor5.current.Boot.registerMenu(myMenuConf);
 				setShow(true);
 			});
 		});
 		// setShow(true);
 	}, []);
-
-  if(show){
-    return <WangEditorReactComponent {...props} WangEditor5={WangEditor5.current}/>;
-  }else{
+	// console.log(show, WangEditor5);
+	if (show) {
+		return <WangEditorReactComponent {...props} WangEditor5={WangEditor5.current} />;
+	} else {
 		return null;
 	}
 }
 
 function WangEditorReactComponent(props) {
 	const { WangEditor5 } = props;
-  const {
-    domKey = 'cmsContent',
-    height = '450px',
-    value,
-    onChange,
-  } = props;
+	const { domKey = 'cmsContent', height = '450px', value, onChange } = props;
 	useEffect(() => {
 		let htmlDefault = '';
 		if (value && value.indexOf('wangEditorHtml') > -1) {
@@ -100,7 +55,8 @@ function WangEditorReactComponent(props) {
 				uploadImage: {
 					customUpload: (file, insertFn) => {
 						compressImage(file, (fileNew) => {
-                uploadOnestopFile(fileNew).then((y) => { // 使用一站式的文件上传接口
+							uploadOnestopFile(fileNew).then((y) => {
+								// 使用一站式的文件上传接口
 								if (y && y.length) {
 									insertFn(queryApiActionPath() + y, file.name);
 								}
@@ -113,10 +69,9 @@ function WangEditorReactComponent(props) {
 			onChange: (editor) => {
 				// console.log('content', editor.children);
 				onChange(editor.getHtml());
-          console.log('html', editor.getHtml());
+				// console.log('html', editor.getHtml());
 			},
-      }
-    ;
+		};
 		const toolbarConfig = {
 			excludeKeys: [
 				'codeBlock',
@@ -127,42 +82,31 @@ function WangEditorReactComponent(props) {
 				'bulletedList',
 				'numberedList',
 			],
-      // insertKeys: {
-      //   index: 5, // 插入的位置，基于当前的 toolbarKeys
-      //   keys: ['video-upload'],
-      // },
+			insertKeys: {
+				index: 0, // 插入的位置，基于当前的 toolbarKeys
+				keys: ['myMenu'],
+			},
 		};
-
-    const editor = WangEditor5.createEditor({
+		editor = WangEditor5.createEditor({
 			selector: '#' + domKey,
 			config: editorConfig,
 			mode: 'default',
-      },
-    );
+		});
 		const toolBar = WangEditor5.createToolbar({
 			editor,
 			selector: '#wangEditorToolBar',
 			config: toolbarConfig,
 			mode: 'default',
 		});
-
-    // console.log(editor.getAllMenuKeys());
-    // console.log(toolBar.getConfig().toolbarKeys);
-
+		return () => {
+			editor.destroy(); // 销毁编辑器
+		};
 	}, []);
 
-  return <div className={styles.wangEditor5}
-              style={{ zIndex: '149', }}
-  >
-    <div id={'wangEditorToolBar'}
-         style={{ zIndex: '150', }}
-    >
-
+	return (
+		<div className={styles.wangEditor5} style={{ zIndex: '149' }}>
+			<div id={'wangEditorToolBar'} style={{ zIndex: '150' }} />
+			<div id={domKey} style={{ zIndex: '149' }} />
 		</div>
-    <div id={domKey}
-         style={{ zIndex: '149', }}
-    >
-
-    </div>
-  </div>;
+	);
 }