add components:Editor

package.json

@@ -6,6 +6,7 @@
   "dependencies": {
     "antd": "^2.7.3",
     "classnames": "^2.2.5",
+    "draftjs-to-markdown": "^0.4.0",
     "dva": "^1.1.0",
     "dva-loading": "^0.2.0",
     "js-cookie": "^2.1.3",
@@ -32,6 +33,7 @@
     "dora-plugin-proxy": "^0.8.5",
     "dora-plugin-webpack": "^0.8.1",
     "dora-plugin-webpack-hmr": "^0.2.1",
+    "draftjs-to-html": "^0.7.0",
     "eslint": "^3.17.1",
     "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-import": "^1.16.0",

src/components/Editor/Editor.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Editor } from 'react-draft-wysiwyg'
+import styles from './Editor.less'
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
+
+
+const DraftEditor = (props) => {
+  return (<Editor toolbarClassName={styles.toolbar} wrapperClassName={styles.wrapper} editorClassName={styles.editor} {...props} />)
+}
+
+export default DraftEditor

src/components/Editor/Editor.less

@@ -0,0 +1,111 @@
+.wrapper {
+  height: 500px;
+
+  :global {
+    .rdw-dropdownoption-default {
+      padding: 6px;
+    }
+
+    .rdw-dropdown-optionwrapper {
+      box-sizing: content-box;
+      width: 100%;
+      border-radius: 0 0 2px 2px;
+    }
+
+    .rdw-inline-wrapper {
+      flex-wrap: wrap;
+      margin-bottom: 0;
+
+      .rdw-option-wrapper {
+        margin-bottom: 6px;
+      }
+    }
+
+    .rdw-option-active {
+      box-shadow: 1px 1px 0 #e8e8e8 inset;
+    }
+
+    .rdw-dropdown-optionwrapper {
+      &:hover {
+        box-shadow: none;
+      }
+    }
+
+    .rdw-colorpicker-option {
+      box-shadow: none;
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-embedded-modal,
+    .rdw-emoji-modal,
+    .rdw-image-modal,
+    .rdw-link-modal {
+      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
+    }
+
+    .rdw-colorpicker-modal,
+    .rdw-embedded-modal,
+    .rdw-link-modal {
+      height: auto;
+    }
+
+    .rdw-emoji-modal {
+      width: 214px;
+    }
+
+    .rdw-colorpicker-modal {
+      width: auto;
+    }
+
+    .rdw-embedded-modal-btn,
+    .rdw-image-modal-btn,
+    .rdw-link-modal-btn {
+      height: 32px;
+      margin-top: 12px;
+    }
+
+    .rdw-embedded-modal-input,
+    .rdw-embedded-modal-size-input,
+    .rdw-link-modal-input {
+      padding: 2px 6px;
+      height: 32px;
+    }
+
+    .rdw-dropdown-selectedtext {
+      color: #000;
+    }
+
+    .rdw-dropdown-wrapper,
+    .rdw-option-wrapper {
+      min-width: 36px;
+      transition: all 0.2s ease;
+      height: 30px;
+
+      &:active {
+        box-shadow: 1px 1px 0 #e8e8e8 inset;
+      }
+
+      &:hover {
+        box-shadow: 1px 1px 0 #e8e8e8;
+      }
+    }
+
+    .rdw-dropdown-wrapper {
+      min-width: 60px;
+    }
+
+    .rdw-editor-main {
+      box-sizing: border-box;
+    }
+  }
+
+  .editor {
+    border: 1px solid #F1F1F1;
+    padding: 5px;
+    border-radius: 2px;
+    height: auto;
+    min-height: 200px;
+  }
+
+  .toolbar {}
+}

src/components/Editor/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Editor",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Editor.js"
+}

src/components/index.js

@@ -2,8 +2,17 @@ import DataTable from './DataTable'
 import DropOption from './DropOption'
 import Iconfont from './Iconfont'
 import Search from './Search'
+import Editor from './Editor'
 import * as Layout from './Layout/index.js'
 
 import layer from './layer'
 
-export { Layout, DataTable, DropOption, Iconfont, Search, layer }
+export {
+  Layout,
+  DataTable,
+  DropOption,
+  Iconfont,
+  Search,
+  Editor,
+  layer,
+ }

src/index.html

@@ -14,7 +14,7 @@
 
 <body>
   <div id="root"></div>
-  <script src="./index.js"></script>
+  <script src="/index.js"></script>
 </body>
 
 </html>

src/router.js

@@ -80,6 +80,14 @@ const Routers = function ({ history, app }) {
               cb(null, require('./routes/UIElement/dataTable/'))
             }, 'UIElement-dataTable')
           },
+        }, {
+          path: 'UIElement/editor',
+          name: 'UIElement/editor',
+          getComponent (nextState, cb) {
+            require.ensure([], require => {
+              cb(null, require('./routes/UIElement/editor/'))
+            }, 'UIElement-editor')
+          },
         }, {
           path: '*',
           name: 'error',

src/routes/UIElement/editor/index.js

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Editor } from '../../../components'
+import { convertToRaw } from 'draft-js'
+import { Row, Col, Card } from 'antd'
+import draftToHtml from 'draftjs-to-html'
+import draftToMarkdown from 'draftjs-to-markdown'
+// https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/components/Demo/index.js
+
+export default class EditorPage extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      editorContent: null,
+    }
+  }
+  onEditorStateChange = (editorContent) => {
+    this.setState({
+      editorContent,
+    })
+  }
+  render () {
+    const { editorContent } = this.state
+    const colProps = {
+      lg: 12,
+      md: 24,
+    }
+    const textareaStyle = {
+      minHeight: 496,
+      width: '100%',
+      background: '#f7f7f7',
+      borderColor: '#F1F1F1',
+      padding: '16px 8px',
+    }
+    return (<div className="content-inner">
+      <Row gutter={32}>
+        <Col {...colProps}>
+          <Card title="Editor" style={{ overflow: 'visible' }}>
+            <Editor
+              wrapperStyle={{
+                minHeight: 500,
+              }}
+              editorStyle={{
+                minHeight: 376,
+              }}
+              editorState={editorContent}
+              onEditorStateChange={this.onEditorStateChange}
+            />
+          </Card>
+        </Col>
+        <Col {...colProps}>
+          <Card title="HTML">
+            <textarea
+              style={textareaStyle}
+              disabled
+              value={editorContent ? draftToHtml(convertToRaw(editorContent.getCurrentContent())) : ''}
+            />
+          </Card>
+        </Col>
+        <Col {...colProps}>
+          <Card title="Markdown">
+            <textarea
+              style={textareaStyle}
+              disabled
+              value={editorContent ? draftToMarkdown(convertToRaw(editorContent.getCurrentContent())) : ''}
+            />
+          </Card>
+        </Col>
+        <Col {...colProps}>
+          <Card title="JSON">
+            <textarea
+              style={textareaStyle}
+              disabled
+              value={editorContent ? JSON.stringify(convertToRaw(editorContent.getCurrentContent())) : ''}
+            />
+          </Card>
+        </Col>
+      </Row>
+    </div>)
+  }
+}

src/utils/menu.js

@@ -31,6 +31,10 @@ module.exports = [
         key: 'search',
         name: 'Search 搜索',
       },
+      {
+        key: 'editor',
+        name: 'Editor 编辑器',
+      },
       {
         key: 'layer',
         name: 'layer 弹层【方法】',