doc: 添加文档

README.md

@@ -12,11 +12,15 @@ $ npm install git+https://git.links123.net/node/editor.git --save
 
 ## 使用
 
+#### RichEditor
+
 ```js
 import React from 'react'
 import { RichEditor } from 'editor';
 
-export default class RichEditor extends React.Component {
+const { EditorState } = RichEditor;
+
+export default class RichEditorDemo extends React.Component {
 
     state = {
         // 创建一个空的editorState作为初始值
@@ -25,7 +29,7 @@ export default class RichEditor extends React.Component {
 
     async componentDidMount () {
         // 假设此处从服务端获取html格式的编辑器内容
-        // const htmlContent = await fetchEditorContent()
+        const htmlContent = await fetchEditorContent()
         const htmlContent = '<h1>ss</h1>'
         // 使用EditorState.createFrom将html字符串转换为编辑器需要的editorState数据
         this.setState({
@@ -37,8 +41,7 @@ export default class RichEditor extends React.Component {
         // 在编辑器获得焦点时按下ctrl+s会执行此方法
         // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
         const htmlContent = this.state.editorState.toHTML()
-        console.log('htmlContent: ', htmlContent)
-        // const result = await saveEditorContent(htmlContent)
+        const result = await saveEditorContent(htmlContent)
     }
 
     handleEditorChange = (editorState) => {
@@ -50,7 +53,7 @@ export default class RichEditor extends React.Component {
         const { editorState } = this.state
         return (
             <div>
-                <BraftEditor
+                <RichEditor
                     value={editorState}
                     onChange={this.handleEditorChange}
                     onSave={this.submitContent}
@@ -62,4 +65,88 @@ export default class RichEditor extends React.Component {
 
 }
 
+```
+
+- defaultProps:
+
+|props|type|value|
+|:-:|:-:|:-:|
+|controls|array||
+
+
+```js
+const controls = [ 'headings', 'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
+      'superscript', 'subscript', 'remove-styles', 'emoji', 'text-align', 'separator',
+            'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
+                'link', 'separator', 'hr', 'separator',
+                'media', 'separator',  'undo', 'redo' ]
+```
+
+
+
+#### MarkdownEditor
+
+```js
+import React from "react";
+import { MarkdownEditor } from 'editor';
+
+export default class MarkdownEditorDemo extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            mdeState: null,
+        };
+        this.converter = new Showdown.Converter({tables: true, simplifiedAutoLink: true});
+    }
+
+    handleValueChange = (mdeState) => {
+        this.setState({mdeState});
+    }
+
+    render() {
+        return (
+            <MarkdownEditor
+                onChange={this.handleValueChange}
+                editorState={this.state.mdeState}
+            />
+        );
+    }
+}
+```
+
+- default props:
+
+|props|type|value|
+|:-:|:-:|:-:|
+|layout|string|'horizontal'|
+|buttonContentOptions|object||
+|generateMarkdownPreview|func||
+
+```js
+
+const icons = {
+    "bold": <FontAwesomeIcon icon="bold" />,
+    "heading": <FontAwesomeIcon icon="heading" />,
+    "italic": <FontAwesomeIcon icon="italic" />,
+    "strikethrough": <FontAwesomeIcon icon="strikethrough" />,
+    "link": <FontAwesomeIcon icon="link" />,
+    "quote-right": <FontAwesomeIcon icon="quote-right" />,
+    "code": <FontAwesomeIcon icon="code" />,
+    "image": <FontAwesomeIcon icon="image" />,
+    "list-ul": <FontAwesomeIcon icon="list-ul" />,
+    "list-ol": <FontAwesomeIcon icon="list-ol" />,
+    "tasks": <FontAwesomeIcon icon="tasks" />,
+  };
+
+const iconProvider = (name) => {
+  return icons[name] || "❓";
+};
+  
+
+const defaultProps = {
+        layout: 'horizontal',
+        buttonContentOptions: { iconProvider },
+        generateMarkdownPreview: (markdown) => Promise.resolve(this.converter.makeHtml(markdown)),
+}
 ```