From 9d011b9c759cb294a41c4c01641c22d9b82b4c05 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Thu, 23 Mar 2017 09:57:31 +0800 Subject: [PATCH] add components:Editor --- package.json | 2 + src/components/Editer/Editer.js | 0 src/components/Editer/Editer.less | 0 src/components/Editor/Editor.js | 11 +++ src/components/Editor/Editor.less | 111 +++++++++++++++++++++++++++ src/components/Editor/package.json | 6 ++ src/components/index.js | 11 ++- src/index.html | 2 +- src/router.js | 8 ++ src/routes/UIElement/editor/index.js | 80 +++++++++++++++++++ src/utils/menu.js | 4 + 11 files changed, 233 insertions(+), 2 deletions(-) delete mode 100644 src/components/Editer/Editer.js delete mode 100644 src/components/Editer/Editer.less create mode 100644 src/components/Editor/Editor.js create mode 100644 src/components/Editor/Editor.less create mode 100644 src/components/Editor/package.json create mode 100644 src/routes/UIElement/editor/index.js diff --git a/package.json b/package.json index 633b113..7ecd028 100644 --- a/package.json +++ b/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", diff --git a/src/components/Editer/Editer.js b/src/components/Editer/Editer.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Editer/Editer.less b/src/components/Editer/Editer.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/Editor/Editor.js b/src/components/Editor/Editor.js new file mode 100644 index 0000000..137a698 --- /dev/null +++ b/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 () +} + +export default DraftEditor diff --git a/src/components/Editor/Editor.less b/src/components/Editor/Editor.less new file mode 100644 index 0000000..dd0dc4a --- /dev/null +++ b/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 {} +} diff --git a/src/components/Editor/package.json b/src/components/Editor/package.json new file mode 100644 index 0000000..8069626 --- /dev/null +++ b/src/components/Editor/package.json @@ -0,0 +1,6 @@ +{ + "name": "Editor", + "version": "0.0.0", + "private": true, + "main": "./Editor.js" +} diff --git a/src/components/index.js b/src/components/index.js index e385d29..b4bf637 100644 --- a/src/components/index.js +++ b/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, + } diff --git a/src/index.html b/src/index.html index 01cf2f8..374a3f3 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@
- + diff --git a/src/router.js b/src/router.js index f29e00d..891c409 100644 --- a/src/router.js +++ b/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', diff --git a/src/routes/UIElement/editor/index.js b/src/routes/UIElement/editor/index.js new file mode 100644 index 0000000..9102622 --- /dev/null +++ b/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 (
+ + + + + + + + +