Notice Module Update

web-react/src/components/form/braft-editor/index.jsx

@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import { Col, Input, InputNumber, Row } from 'antd'
+import { AntIcon } from 'components'
+import BraftEditor from 'braft-editor'
+import 'braft-editor/dist/index.css'
+
+export default class index extends Component {
+    state = {
+        editorState: BraftEditor.createEditorState(this.props.value), // 设置编辑器初始内容
+        outputHTML: '<p></p>',
+    }
+    /**
+     * mount后回调
+     */
+    componentDidMount() {
+        // 3秒后更改编辑器内容
+        setTimeout(this.setEditorContentAsync, 2000)
+    }
+    componentWillUnmount() {
+        this.isLivinig = false
+    }
+    handleChange = editorState => {
+        const outputHTML = editorState.toHTML()
+
+        const { onChange } = this.props
+
+        this.setState({
+            editorState: editorState,
+            outputHTML,
+        })
+
+        onChange && onChange(outputHTML)
+    }
+
+    setEditorContentAsync = () => {
+        const { placeholder, value, onChange } = this.props
+        this.isLivinig &&
+            this.setState({
+                editorState: BraftEditor.createEditorState(value),
+            })
+    }
+    render() {
+        const { editorState, outputHTML } = this.state
+
+        //localStorage.setItem('props', JSON.stringify(this.props))
+        const controls = ['bold', 'italic', 'underline', 'text-color', 'separator', 'media']
+        return (
+            <BraftEditor
+                value={editorState}
+                controls={controls}
+                onChange={this.handleChange}
+                placeholder={'输入内容'}
+            />
+        )
+    }
+}

web-react/src/components/index.js

@@ -12,4 +12,5 @@ export { default as PhotoPreview } from './photo-preview'
 export { default as QueryList } from './query-list'
 export { default as QueryTable } from './query-table'
 export { default as QueryTableActions } from './query-table-actions'
-export { default as QueryTreeLayout } from './query-tree-layout'
+export { default as QueryTreeLayout } from './query-tree-layout'
+export { default as BraftEditor } from './form/braft-editor'