wangEditor5优化开发

zyd_public/WangEditor/WangEditor5/ReactComponent.js

@@ -10,8 +10,8 @@
  * npm run build 获取编译后的文件/packages/editor/dist 复制出来放在项目代码中并使用
  * 2022年6月25日 解决了上传图片功能
  * TODO 无法创建自定义菜单 (Pdf上传功能, 视频上传功能);
- * TODO https://www.wangeditor.com/v5/development.html#%E6%B3%A8%E5%86%8C%E8%8F%9C%E5%8D%95
- *
+ * TODO https://github.com/wangeditor-team/wangEditor/issues/4465 使用这里面说的建立自定义菜单
+ * 2022年7月5日 改为异步加载依赖 保证功能正常；
  * */
 
 /**
@@ -51,16 +51,35 @@
  * */
 
 import styles from './css/style.less';
-import * as WangEditor5 from './index.esm';
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import compressImage from '@/webPublic/zyd_public/WangEditor/compressImage';
-// import uploadFile from '@/webPublic/zyd_public/WangEditor/uploadFile';
 import { queryApiActionPath } from '@/webPublic/one_stop_public/utils/queryConfig';
 import { uploadFile as uploadOnestopFile } from '@/webPublic/one_stop_public/libs/PictureSignature/ShowItem';
-console.log(WangEditor5);
-// console.log(WangEditor5Menus);
+import loadCss from '@/webPublic/zyd_public/WangEditor/WangEditor5/css/cssLoader';
+
+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 文件
+        WangEditor5.current = res;
+        console.log(WangEditor5);
+        setShow(true);
+      });
+    });
+    // setShow(true);
+  }, []);
+
+  if(show){
+    return <WangEditorReactComponent {...props} WangEditor5={WangEditor5.current}/>;
+  }else{
+    return null;
+  }
+}
 
-export default function WangEditorReactComponent(props) {
+function WangEditorReactComponent(props) {
+  const { WangEditor5 } = props;
   const {
     domKey = 'cmsContent',
     height = '450px',