dev: 初步实现图文编辑组件

src/components/Editor/CommonTool/ControlsToolBar.tsx

@@ -14,6 +14,7 @@ interface ControlsToolBarProps {
   toolList: Array<ToolListItem>;
   injectIconWrapStyle?: any;
   injectIconStyle?: any;
+  injectIconTextStyle?: any;
 }
 
 export const ControlsToolBar = (props: ControlsToolBarProps) => {
@@ -23,14 +24,18 @@ export const ControlsToolBar = (props: ControlsToolBarProps) => {
     toolList = [],
     injectIconWrapStyle = {},
     injectIconStyle = {},
+    injectIconTextStyle = {},
   } = props;
   const IconWrapStyle = {
+    display: 'flex',
+    alignItems: 'center',
     cursor: "pointer",
     textAlign: "center" as const,
-    width: "42px",
+    minWidth: "42px",
     ...injectIconWrapStyle,
   };
   const IconStyle = { fontSize: "21px", ...injectIconStyle };
+  const IconTextStyle = { margin: "0 4px", ...injectIconTextStyle };
 
   if (toolList.length < 1) {
     return null;
@@ -46,6 +51,9 @@ export const ControlsToolBar = (props: ControlsToolBarProps) => {
           onClick={i.onClick}
         >
           <i className={i.iconClass} style={IconStyle} />
+          {
+            i.text ? <span style={IconTextStyle}>{i.text}</span> : null
+          }
         </div>
       ))
     }

src/components/Editor/QAEditor/SimpleEditor.tsx

@@ -7,6 +7,7 @@ import styles from './index.less';
 interface QASimpleEditorProps extends BaseEditorProps {
   toolAlign?: 'inner' | 'bottom';
   toolList?: Array<ToolListItem>;
+  injectControlsToolBar?: any;
   toolBarContainerStyle?: any;
   appendToolBtn?: any;
 }
@@ -17,6 +18,7 @@ const QASimpleEditor = (props: QASimpleEditorProps) => {
     onChange, 
     toolAlign = 'inner',
     toolList = [],
+    injectControlsToolBar = {},
     toolBarContainerStyle = {},
     appendToolBtn = null,
   } = props;
@@ -52,6 +54,7 @@ const QASimpleEditor = (props: QASimpleEditorProps) => {
             editorState={value}
             setEditorState={onChange}
             toolList={toolList}
+            {...injectControlsToolBar}
           />
         </div>
         {appendToolBtn}

stories/Editor.stories.tsx

@@ -125,6 +125,7 @@ stories.add(
             {
               key: 1,
               color: "#f07977",
+              text: "长文",
               iconClass: "schedule schedule-icon_story",
               onClick: () => {
                 setEditorState(
@@ -135,6 +136,7 @@ stories.add(
             {
               key: 2,
               color: "#3d9bfe",
+              text: "话题",
               iconClass: "schedule schedule-icon_topic",
               onClick: () => {
                 setEditorState(
@@ -145,6 +147,7 @@ stories.add(
             {
               key: 3,
               color: "#ffa405",
+              text: "表情",
               iconClass: "schedule schedule-icon_emoticon",
               onClick: () => {
                 setEditorState(
@@ -155,6 +158,7 @@ stories.add(
             {
               key: 4,
               color: "#71c135",
+              text: "图片",
               iconClass: "schedule schedule-icon_img",
               onClick: () => {
                 setEditorState(
@@ -163,6 +167,11 @@ stories.add(
               }
             }
           ]}
+          injectControlsToolBar={{
+            injectIconWrapStyle: {
+              marginRight: "4px"
+            }
+          }}
           toolAlign={select("toolAlign", {
             Inner: 'inner',
             Bottom: 'bottom',
@@ -185,7 +194,7 @@ stories.add(
                   }
                 >
                   <Checkbox>
-                    anonymous
+                    Anonymous
                   </Checkbox>
                 </Popover>
               </div>