7.5 wangeditor

config/router.config.ts

@@ -36,6 +36,11 @@ export default [
     path: '/Calendar',
     component: './MainPage/ProjectManager/components/CalendarForm',
   },
+  //富文本组件
+  {
+    path: '/editor',
+    component: './MainPage/ProjectManager/components/WangEditor',
+  },
   //401错误页
   {
     exact: true,

src/components/richText/wang/index.tsx

@@ -46,7 +46,7 @@ const BraftText: React.FC<WangType> = (props) => {
     'fullscreen', //全屏
 
     // 'emoticon',//表情
-    // 'image',//图片
+    'image',//图片
     // 'video',//视频
     // 'table',//表格
     // 'todo',//待办

src/pages/MainPage/ProjectManager/components/WangEditor.tsx

@@ -0,0 +1,35 @@
+import React, { useRef, useState } from 'react';
+import { Button, Typography } from 'antd';
+import BraftText from '@/components/richText/wang';
+import ProCard from '@ant-design/pro-card';
+import { isEmpty } from '@/utils/CommonUtils';
+
+const Editor: React.FC<{}> = () => {
+    const braftRef = useRef<any>(null);
+    const [text, setText] = useState();
+    const { Text, Paragraph } = Typography;
+    return (
+        <ProCard
+            split={'vertical'}
+            bordered
+            headerBordered
+        >
+            <ProCard title="文本域" colSpan="50%" extra={<Button type='primary' onClick={() => setText(braftRef.current?.getHtml())}>生成</Button>}>
+                <BraftText braftRef={braftRef} echo={''} disabled={false} height={600} />
+            </ProCard>
+            <ProCard title="代码段">
+                {isEmpty(text) ? '没有' : (
+                    <Paragraph>
+                        <pre>
+                            <Text copyable>
+                                {text}
+                            </Text>
+                        </pre>
+                    </Paragraph>
+                )}
+            </ProCard>
+        </ProCard>
+    );
+};
+
+export default Editor;