wangedit

package.json

@@ -60,7 +60,8 @@
     "umi": "^2.8.7",
     "umi-plugin-pro-block": "^1.3.2",
     "umi-plugin-react": "^1.9.5",
-    "umi-request": "^1.0.8"
+    "umi-request": "^1.0.8",
+    "wangeditor": "^3.1.1"
   },
   "devDependencies": {
     "@ant-design/colors": "^3.1.0",

src/components/Wangedit/Wangedit.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import E from 'wangeditor'
+
+/**
+ *
+ *
+ * @param {*} props
+ * @returns
+ */
+class Wangedit extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.state = {}
+  }
+
+  render () {
+    return (
+      <div ref="editorElem" style={{textAlign: 'left'}}>
+      </div>
+    );
+  }
+
+  componentDidMount () {
+    const elem = this.refs.editorElem
+    const editor = new E(elem)
+    // 使用 onchange 函数监听内容的变化
+    editor.customConfig.onchange = this.props.onChange
+    editor.create()
+    editor.txt.html(this.props.value)
+  }
+}
+
+export default Wangedit
+

src/pages/activity/editActivity.jsx

@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import { Form, Input, Button, Icon, Select, Tabs, Radio } from 'antd';
 import { FormattedMessage } from 'umi-plugin-react/locale';
 import styles from '../style/GoodsList.less';
+import XForm, { FieldTypes } from '../../components/XForm';
+import Wangedit from '../../components/Wangedit/Wangedit'
 
 /**
  *
@@ -15,7 +17,64 @@ import styles from '../style/GoodsList.less';
   console.log(dynamicId)
 
   const Basic = (props) => {
-  return <div>Basic</div>
+    const fields = [
+      {
+        label: '所属项目',
+        name: 'org_id',
+        type: FieldTypes.Text
+      },
+      {
+        label: '主图',
+        name: 'city_id',
+        type: FieldTypes.ImageUploader,
+      },
+      {
+        label: '活动标题',
+        name: 'share_num',
+        type: FieldTypes.Text,
+        placeholder: '不填, 默认使用手机号'
+      },
+      {
+        label: '活动时间',
+        name: 'save_num',
+        type: FieldTypes.Text,
+        rules: [
+          {required: true, message: '请填写手机号'}
+        ]
+      },
+      {
+        label: '活动地点',
+        name: 'pv_num',
+        type: FieldTypes.ImageUploader,
+        extra: '建议图片大小 128 * 128'
+      },
+      {
+        label: '活动人数',
+        name: 'favor_num',
+        type: FieldTypes.DatePicker,
+      },
+      {
+        label: '活动详情',
+        name: 'expDate',
+        render: <Wangedit />,
+        value: "222222",
+      },
+      {
+        label: '是否需要报名',
+        name: 'volume_rate',
+        type: FieldTypes.DatePicker,
+      },
+      {
+        label: '报名时间',
+        name: 'parking_rate',
+        type: FieldTypes.DatePicker,
+      },
+    ]
+  
+    const handleSubmit = val => {
+      window.console.log('submit data --->', val)
+    }
+    return <XForm onSubmit={handleSubmit} fields={fields}></XForm>
   }
   
   const Poster = (props) => {