1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- import React from 'react';
- import { BarftEditorPage, BaseEditorProps } from "@components/Editor/BraftEditor";
- import { ControlsToolBar, ToolListItem } from "@components/Editor/CommonTool/ControlsToolBar";
- import { ContentUtils } from "braft-utils";
- import styles from './index.less';
-
- interface SimpleEditorProps extends BaseEditorProps {
- toolAlign?: 'inner' | 'bottom' | 'both';
- toolList?: Array<ToolListItem>;
- injectControlsToolBar?: any;
- injectBraftEditorProps?: any;
- toolBarContainerStyle?: any;
- appendToolBtn?: any;
- appendInnderBar?: any;
- }
-
- const SimpleEditor = (props: SimpleEditorProps) => {
- const {
- value,
- onChange,
- toolAlign = 'inner',
- toolList = [],
- injectControlsToolBar = {},
- toolBarContainerStyle = {},
- injectBraftEditorProps = {},
- appendToolBtn = null,
- appendInnderBar = null,
- } = props;
-
-
- if (toolAlign === 'inner') {
- return (
- <BarftEditorPage
- value={value}
- onChange={onChange}
- controls={[]}
- FloatControls={({ editorState, setEditorState }: any) => (
- <ControlsToolBar
- editorState={editorState}
- setEditorState={setEditorState}
- toolList={toolList}
- {...injectControlsToolBar}
- />)
- }
- {...injectBraftEditorProps}
- />
- )
- }
-
- if (toolAlign === 'both') {
- return (
- <div>
- <BarftEditorPage
- value={value}
- onChange={onChange}
- controls={[]}
- FloatControls={{appendInnderBar}}
- {...injectBraftEditorProps}
- />
- <div style={toolBarContainerStyle}>
- <div className={styles.bottomToolBarWrapper}>
- <ControlsToolBar
- editorState={value}
- setEditorState={onChange}
- toolList={toolList}
- {...injectControlsToolBar}
- />
- </div>
- {appendToolBtn}
- </div>
- </div>
- )
- }
-
- return (
- <div>
- <BarftEditorPage
- value={value}
- onChange={onChange}
- controls={[]}
- {...injectBraftEditorProps}
- />
- <div style={toolBarContainerStyle}>
- <div className={styles.bottomToolBarWrapper}>
- <ControlsToolBar
- editorState={value}
- setEditorState={onChange}
- toolList={toolList}
- {...injectControlsToolBar}
- />
- </div>
- {appendToolBtn}
- </div>
- </div>
- );
- }
-
- export default SimpleEditor;
|