diff --git a/package.json b/package.json
index 35c425c..d4b7f14 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
"antd": "^4.7.0",
"antd-img-crop": "^3.10.0",
"axios": "^0.19.2",
+ "braft-editor": "^2.3.9",
"chatbot-antd": "^0.6.0",
"codemirror": "^5.57.0",
"dom-to-image": "^2.6.0",
diff --git a/src/assets/richText.png b/src/assets/richText.png
new file mode 100644
index 0000000..be1d423
Binary files /dev/null and b/src/assets/richText.png differ
diff --git a/src/components/BasicShop/BasicComponents/RichText/index.less b/src/components/BasicShop/BasicComponents/RichText/index.less
new file mode 100644
index 0000000..66c8363
--- /dev/null
+++ b/src/components/BasicShop/BasicComponents/RichText/index.less
@@ -0,0 +1,17 @@
+.richTextWrap {
+ :global(p) {
+ margin-bottom: 0;
+ }
+ :global(img) {
+ max-width: 100%;
+ text-align: center;
+ }
+ :global(blockquote) {
+ margin: 0 0 10px;
+ padding: 12px 20px;
+ background-color: #f1f2f3;
+ border-left: 5px solid #ccc;
+ color: #666;
+ font-style: italic;
+ }
+}
diff --git a/src/components/BasicShop/BasicComponents/RichText/index.tsx b/src/components/BasicShop/BasicComponents/RichText/index.tsx
new file mode 100644
index 0000000..56433d3
--- /dev/null
+++ b/src/components/BasicShop/BasicComponents/RichText/index.tsx
@@ -0,0 +1,30 @@
+import React, { memo, useState } from 'react';
+import styles from './index.less';
+import { IButtonConfig } from './schema';
+import logo from '@/assets/richText.png';
+
+interface IProps extends IButtonConfig {
+ isTpl: boolean;
+}
+
+const XButton = memo((props: IProps) => {
+ const { isTpl, borderColor, borderWidth, round, padding, content } = props;
+
+ return isTpl ? (
+
+

+
+ ) : (
+
+ );
+});
+export default XButton;
diff --git a/src/components/BasicShop/BasicComponents/RichText/schema.ts b/src/components/BasicShop/BasicComponents/RichText/schema.ts
new file mode 100644
index 0000000..feb9075
--- /dev/null
+++ b/src/components/BasicShop/BasicComponents/RichText/schema.ts
@@ -0,0 +1,64 @@
+import {
+ IColorConfigType,
+ INumberConfigType,
+ ITextConfigType,
+ TColorDefaultType,
+ TNumberDefaultType,
+ TTextDefaultType,
+ IRichTextConfigType,
+ TRichTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TButtonEditData = Array<
+ ITextConfigType | IColorConfigType | INumberConfigType | IRichTextConfigType
+>;
+
+export interface IButtonConfig {
+ round: TNumberDefaultType;
+ borderWidth: TNumberDefaultType;
+ padding: TNumberDefaultType;
+ borderColor: TColorDefaultType;
+ content: TRichTextDefaultType;
+}
+
+export interface IButtonSchema {
+ editData: TButtonEditData;
+ config: IButtonConfig;
+}
+const Button: IButtonSchema = {
+ editData: [
+ {
+ key: 'round',
+ name: '边框圆角',
+ type: 'Number',
+ },
+ {
+ key: 'borderWidth',
+ name: '边框宽度',
+ type: 'Number',
+ },
+ {
+ key: 'borderColor',
+ name: '边框颜色',
+ type: 'Color',
+ },
+ {
+ key: 'padding',
+ name: '内边距',
+ type: 'Number',
+ },
+ {
+ key: 'content',
+ name: '内容',
+ type: 'RichText',
+ },
+ ],
+ config: {
+ round: 0,
+ borderWidth: 0,
+ borderColor: 'rgba(255,255,255,1)',
+ padding: 0,
+ content: '',
+ },
+};
+export default Button;
diff --git a/src/components/BasicShop/BasicComponents/RichText/template.ts b/src/components/BasicShop/BasicComponents/RichText/template.ts
new file mode 100644
index 0000000..049a8e7
--- /dev/null
+++ b/src/components/BasicShop/BasicComponents/RichText/template.ts
@@ -0,0 +1,6 @@
+const template = {
+ type: 'RichText',
+ h: 120,
+ displayName: '富文本组件',
+};
+export default template;
diff --git a/src/components/BasicShop/BasicComponents/schema.ts b/src/components/BasicShop/BasicComponents/schema.ts
index b4e6bf1..8945800 100644
--- a/src/components/BasicShop/BasicComponents/schema.ts
+++ b/src/components/BasicShop/BasicComponents/schema.ts
@@ -11,6 +11,7 @@ import Notice from './Notice/schema';
import Qrcode from './Qrcode/schema';
import Tab from './Tab/schema';
import Text from './Text/schema';
+import RichText from './RichText/schema';
const basicSchema = {
Carousel,
@@ -26,5 +27,6 @@ const basicSchema = {
Qrcode,
Tab,
Text,
+ RichText,
};
export default basicSchema;
diff --git a/src/components/BasicShop/BasicComponents/template.ts b/src/components/BasicShop/BasicComponents/template.ts
index bb90856..b38a50e 100644
--- a/src/components/BasicShop/BasicComponents/template.ts
+++ b/src/components/BasicShop/BasicComponents/template.ts
@@ -11,6 +11,7 @@ import Qrcode from './Qrcode/template';
import Tab from './Tab/template';
import Text from './Text/template';
import WhiteTpl from './WhiteTpl/template';
+import RichText from './RichText/template';
const basicTemplate = [
Carousel,
@@ -26,6 +27,7 @@ const basicTemplate = [
Tab,
Text,
WhiteTpl,
+ RichText,
];
const BasicTemplate = basicTemplate.map(v => {
return { ...v, category: 'base' };
diff --git a/src/components/PanelComponents/FormEditor/index.tsx b/src/components/PanelComponents/FormEditor/index.tsx
index 3945838..1bdbfc4 100644
--- a/src/components/PanelComponents/FormEditor/index.tsx
+++ b/src/components/PanelComponents/FormEditor/index.tsx
@@ -8,6 +8,7 @@ import CardPicker from '../CardPicker';
import Table from '../Table';
import Pos from '../Pos';
import { Store } from 'antd/lib/form/interface';
+import RichText from '../XEditor';
import FormItems from '../FormItems';
// import styles from './index.less';
const normFile = (e: any) => {
@@ -158,6 +159,11 @@ const FormEditor = (props: FormEditorProps) => {
)}
+ {item.type === 'RichText' && (
+
+
+
+ )}
);
})}
diff --git a/src/components/PanelComponents/XEditor/index.less b/src/components/PanelComponents/XEditor/index.less
new file mode 100644
index 0000000..4783014
--- /dev/null
+++ b/src/components/PanelComponents/XEditor/index.less
@@ -0,0 +1,4 @@
+.avatarUploader > :global(.ant-upload) {
+ width: 128px;
+ height: 128px;
+}
diff --git a/src/components/PanelComponents/XEditor/index.tsx b/src/components/PanelComponents/XEditor/index.tsx
new file mode 100644
index 0000000..ff739db
--- /dev/null
+++ b/src/components/PanelComponents/XEditor/index.tsx
@@ -0,0 +1,94 @@
+import React, { useState, useEffect, memo } from 'react';
+import req from '@/utils/req';
+import BraftEditor from 'braft-editor';
+import 'braft-editor/dist/index.css';
+import styles from './index.less';
+
+const controls = [
+ {
+ key: 'bold',
+ text: 加粗,
+ },
+ 'undo',
+ 'redo',
+ 'emoji',
+ 'list-ul',
+ 'list-ol',
+ 'blockquote',
+ 'text-align',
+ 'font-size',
+ 'line-height',
+ 'letter-spacing',
+ 'text-color',
+ 'italic',
+ 'underline',
+ 'link',
+ 'media',
+];
+
+export default memo(function XEditor(props: any) {
+ const [editorState, setEditorState] = useState(BraftEditor.createEditorState());
+
+ const { value, onChange } = props;
+
+ const myUploadFn = param => {
+ const fd = new FormData();
+ fd.append('file', param.file);
+
+ req
+ .post('xxxx', fd, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ },
+ onUploadProgress: function(event) {
+ // 上传进度发生变化时调用param.progress
+ console.log((event.loaded / event.total) * 100);
+ param.progress((event.loaded / event.total) * 100);
+ },
+ })
+ .then(res => {
+ console.log(res);
+ // 上传成功后调用param.success并传入上传后的文件地址
+ param.success({
+ url: res.url,
+ meta: {
+ id: Date.now(),
+ title: res.filename,
+ alt: '趣谈前端',
+ },
+ });
+ })
+ .catch(err => {
+ param.error({
+ msg: '上传失败.',
+ });
+ });
+ };
+
+ const submitContent = () => {
+ const htmlContent = editorState.toHTML();
+ onChange && onChange(htmlContent);
+ };
+
+ const handleEditorChange = editorState => {
+ setEditorState(editorState);
+ if (onChange) {
+ const htmlContent = editorState.toHTML();
+ onChange(htmlContent);
+ }
+ };
+
+ useEffect(() => {
+ const htmlContent = value || '';
+ setEditorState(BraftEditor.createEditorState(htmlContent));
+ }, []);
+ return (
+
+ );
+});
diff --git a/src/components/Zan/index.tsx b/src/components/Zan/index.tsx
index c53f694..1857198 100644
--- a/src/components/Zan/index.tsx
+++ b/src/components/Zan/index.tsx
@@ -5,7 +5,7 @@ import styles from './index.less';
///这组件写的有问题 popover会重定位
const content = (
-

+
);
diff --git a/src/pages/home/index.less b/src/pages/home/index.less
index 4764bee..0701447 100644
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@@ -53,7 +53,7 @@
.footer {
margin-top: 50px;
text-align: center;
- font-size: 50px;
+ font-size: 15px;
p {
font-size: 16px;
}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index b8f3453..0efc776 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -1,13 +1,13 @@
import React from 'react';
-import { Tabs, message, Button } from 'antd';
+import { Tabs, message } from 'antd';
import { history } from 'umi';
import {
MobileOutlined,
ConsoleSqlOutlined,
- GithubOutlined,
CodeOutlined,
IdcardOutlined,
} from '@ant-design/icons';
+import Zan from '@/components/Zan';
import styles from './index.less';
const { TabPane } = Tabs;
@@ -90,21 +90,30 @@ const Home = () => {