, panel)
24 | }
25 |
26 | render(){
27 | if(this.canBack === undefined){
28 | this.canBack = history.canBack;
29 | }
30 | return (
31 |
32 | {
33 | this.canBack ?
34 |
: ''
35 | }
36 |
{this.props.title}
37 |
40 |
2 |
3 |
4 |
6 |
7 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/history.js:
--------------------------------------------------------------------------------
1 | /* eslint no-console: 0 */
2 |
3 | //import { browserHistory } from 'react-router'
4 |
5 | //hash地址
6 | import { hashHistory } from 'react-router'
7 | var browserHistory = hashHistory
8 |
9 |
10 | const PATHS_LENGTH = -1
11 | let paths = browserHistory.paths = browserHistory.paths || []
12 |
13 | //防止测试环境加载两次的问题
14 | if(!browserHistory.unlisten){
15 |
16 | browserHistory.unlisten = browserHistory.listen(location => {
17 | let pathname = location.pathname
18 | if(pathname.charAt(0) !== '/'){
19 | pathname = '/'.concat(pathname)
20 | }
21 |
22 | let len = paths.length
23 |
24 | browserHistory.isBack = (len > 1 && pathname === paths[len-2])
25 | if(browserHistory.isBack) {
26 | paths.pop()
27 | } else if (len === 0 || paths[len-1] !== pathname){
28 | if(PATHS_LENGTH === -1 || len < PATHS_LENGTH)
29 | paths.push(pathname)
30 | else{
31 | for(let i = 0; i < len - 1; i++){
32 | paths[i] = paths[i+1]
33 | }
34 | paths[len - 1] = pathname
35 | }
36 | }
37 |
38 |
39 |
40 | browserHistory.canBack = (paths.length > 1)
41 | })
42 |
43 |
44 | window.addEventListener('popstate', function () {
45 | // if(paths.length > 1){
46 | // paths.pop()
47 | // paths.pop()
48 | // browserHistory.canBack = (paths.length > 1)
49 | // }
50 | console.log('popstate')
51 |
52 | browserHistory.isBack = true
53 |
54 | })
55 | }
56 |
57 | export default browserHistory
58 |
--------------------------------------------------------------------------------
/src/resources/img/i-form-comment-ios.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/umeditor/tools/insert-image.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import classnames from 'classnames'
3 | require('../plugins/inserthtml.js')
4 | require('../plugins/image.js')
5 |
6 | class InsertImage extends React.Component{
7 | constructor(props) {
8 | super(props);
9 | this.edit = props.edit
10 | this.state = {
11 | }
12 | }
13 |
14 |
15 | componentDidMount(){
16 | }
17 |
18 | handleInsertImage(event){
19 | var files =[].slice.call(event.target.files, 0),
20 | file = files[0];
21 | event.target.value = ''
22 |
23 | if(this.props.handler) {
24 | this.props.handler( file, (url) => {
25 | this.edit.execCommand('insertimage', {
26 | src: url,
27 | width: '100%'
28 | }, this, event)
29 | })
30 | } else {
31 | this.edit.execCommand('insertimage', {
32 | src: URL.createObjectURL(file),
33 | width: '100%'
34 | })
35 | }
36 |
37 |
38 | }
39 |
40 | render(){
41 | return (
42 |
43 |
44 |
46 | )
47 | }
48 | }
49 |
50 |
51 | export default InsertImage
52 |
--------------------------------------------------------------------------------
/examples/src/components/swiper/SwiperPaginationProgressPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AnimationPage from '../Page'
3 | import classnames from 'classnames';
4 | import Swiper from 'react-ui/swiper'
5 |
6 | class SwiperPaginationProgressPage extends AnimationPage{
7 | constructor(props) {
8 | super(props);
9 | }
10 |
11 | componentDidMount(){
12 | new Swiper(this.refs.slider, {pagination:'.swiper-pagination', paginationType: 'progress'})
13 | }
14 |
15 | render(){
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
Slide 1
23 |
Slide 2
24 |
Slide 3
25 |
Slide 4
26 |
Slide 5
27 |
Slide 6
28 |
Slide 7
29 |
Slide 8
30 |
Slide 9
31 |
Slide 10
32 |
33 |
34 |
35 |
'+this.getContent(null,null,true)+'
');
44 | d.close();
45 | },
46 | notNeedUndo : 1
47 | };
--------------------------------------------------------------------------------
/examples/src/components/clip-image/ClipImagePage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AnimationPage from '../Page'
3 | import classnames from 'classnames';
4 | import ImageCliper from 'react-ui/image-cliper'
5 | require('../../resources/less/clip-image.less')
6 | class ClipImagePage extends AnimationPage{
7 | constructor(props) {
8 | super(props);
9 | this.state = {}
10 | }
11 |
12 | componentDidMount(){
13 | }
14 |
15 |
16 |
17 | onSelectImage(event){
18 | var files =[].slice.call(event.target.files, 0),
19 | file = files[0];
20 |
21 | var onClip = (blob) => {
22 | var url = URL.createObjectURL(blob);
23 | this.setState({
24 | url : url
25 | })
26 | }
27 |
28 | ImageCliper.imageCliper({
29 | type: 'page',
30 | file: file,
31 | onClip: onClip,
32 | ratio:1,
33 | fill: true
34 | }).open()
35 | event.target.value = ''
36 | }
37 |
38 | render(){
39 | return (
40 |
41 |
42 |
43 |
45 |
46 |
47 | {this.state.url ?
: ''}
48 |
49 |
50 |
51 |
30 |
项目符合/编号
31 |
32 | {
33 | listTypes.map(item => (
34 |
35 |
38 | ))
39 | }
40 |
41 |
17 |
18 |
19 |
21 |
24 |
26 |
29 |
31 |
32 |
Swipeable Tabs
33 |
NEW
34 |
36 |
37 |
2 |
3 |
4 |
6 |
7 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/src/draft-editor/tools/font-size.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames'
3 | require('../../resources/less/scroll.less')
4 | var prefix = 'fontSize'
5 | var fontsizeList = [12, 16, 18, 24, 32, 48];
6 | var fontSizeStyleMap = (function(){
7 | return fontsizeList.reduce((res, item) => {
8 |
9 | res[prefix+item] = {
10 | 'fontSize': item+'px'
11 | }
12 | return res;
13 | }, {})
14 | })()
15 |
16 | class FontSize extends React.Component{
17 | constructor(props) {
18 | super(props);
19 | this.edit = props.edit
20 | this.state = {
21 | }
22 | }
23 |
24 | handleChangeFontSize(value ){
25 |
26 | this.setState({
27 | value: value
28 | })
29 | this.edit.toggleFontSize(prefix+value)
30 | }
31 |
32 | render(){
33 | return (
34 |
35 |
字体大小
36 |
37 |
38 | {
39 | fontsizeList.map(value => (
40 |
41 |
44 | ))
45 | }
46 |
47 |
48 |
49 |
50 |
42 |
对齐
43 |
44 | {
45 | justifyList.map(value => (
46 |
47 |
50 | ))
51 | }
52 |
53 |
42 |
对齐
43 |
44 | {
45 | justifyList.map(value => (
46 |
47 |
50 | ))
51 | }
52 |
53 |
2 |
3 |
4 |
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/plugins.js:
--------------------------------------------------------------------------------
1 | /*=======================================
2 | ************ Plugins API ************
3 | =======================================*/
4 | import reactUI from './react-ui'
5 | import PARAMS from './params'
6 | var plugins = {}
7 | var _plugins = [];
8 |
9 | var $ = {}
10 | $.initPlugins = reactUI.initPlugins = function () {
11 | // Initialize plugins
12 | for (var plugin in plugins) {
13 | var p = plugins[plugin](reactUI, PARAMS[plugin]);
14 | if (p) _plugins.push(p);
15 | }
16 | };
17 | // Plugin Hooks
18 | $.pluginHook = reactUI.pluginHook = function (hook) {
19 | for (var i = 0; i < _plugins.length; i++) {
20 | if (_plugins[i].hooks && hook in _plugins[i].hooks) {
21 | _plugins[i].hooks[hook](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5]);
22 | }
23 | }
24 | };
25 | // Prevented by plugin
26 | $.pluginPrevent = reactUI.pluginPrevent = function (action) {
27 | var prevent = false;
28 | for (var i = 0; i < _plugins.length; i++) {
29 | if (_plugins[i].prevents && action in _plugins[i].prevents) {
30 | if (_plugins[i].prevents[action](arguments[1], arguments[2], arguments[3], arguments[4], arguments[5])) prevent = true;
31 | }
32 | }
33 | return prevent;
34 | };
35 | // Preprocess content by plugin
36 | $.pluginProcess = reactUI.pluginProcess = function (process, data) {
37 | var processed = data;
38 | for (var i = 0; i < _plugins.length; i++) {
39 | if (_plugins[i].preprocess && process in _plugins[i].preprocess) {
40 | processed = _plugins[i].preprocess[process](data, arguments[2], arguments[3], arguments[4], arguments[5], arguments[6]);
41 | }
42 | }
43 | return processed;
44 | };
45 |
46 | export default $;
47 |
48 |
--------------------------------------------------------------------------------
/examples/src/components/kind-editor/EditorPage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import AnimationPage from '../Page'
3 | import classnames from 'classnames';
4 | import Editor from 'react-ui/editor'
5 | // require('react-ui/editor/plugins/image')
6 | require('react-ui/editor/lang/zh_CN')
7 |
8 | class EditorPage extends AnimationPage{
9 | constructor(props) {
10 | super(props);
11 | }
12 |
13 | componentDidMount(){
14 | this.editor = Editor.create('textarea[name="content"]', {
15 | resizeType : 1,
16 | allowPreviewEmoticons : false,
17 | allowImageUpload : true,
18 | // fullscreenMode: true,
19 | width: '100%',
20 | height: '100%',
21 | items : [
22 | 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
23 | 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
24 | 'insertunorderedlist', '|', 'emoticons', 'image', 'link']
25 | });
26 | }
27 | handleGetHtml(e){
28 | e.preventDefault()
29 | alert(this.editor.html());
30 | }
31 | render(){
32 | return (
33 |
46 | )
47 | }
48 | }
49 |
50 | module.exports = EditorPage
51 |
--------------------------------------------------------------------------------
/src/draft-editor/tools/link.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import TextFieldEditor from '../../widget/textfield-editor'
3 |
4 | class CreateLink extends React.Component{
5 | constructor(props) {
6 | super(props);
7 | this.edit = props.edit
8 | this.state = {
9 | }
10 | }
11 |
12 |
13 | componentDidMount(){
14 | }
15 |
16 | handleCreateLink(event){
17 | event.preventDefault()
18 | const {editorState} = this.edit.state;
19 | const selection = editorState.getSelection();
20 | if (selection.isCollapsed()) {
21 | alert('请选择加超链接的文本')
22 | return;
23 | }
24 | TextFieldEditor.open({
25 | title: '填写链接地址',
26 | showType: 'popup',
27 | onOk: (val) => {
28 | this.edit.createLink(val)
29 | }
30 | })
31 | // this.doc.execCommand('insertHTML', false, '');
32 | }
33 |
34 | render(){
35 | return (
36 |
37 |
39 | )
40 | }
41 | }
42 |
43 | class RemoveLink extends React.Component{
44 | constructor(props) {
45 | super(props);
46 | this.edit = props.edit
47 | this.state = {
48 | }
49 | }
50 |
51 |
52 | componentDidMount(){
53 | }
54 |
55 | handleRemoveLink(event){
56 | event.preventDefault()
57 | this.edit.removeLink()
58 | // this.doc.execCommand('insertHTML', false, '');
59 | }
60 |
61 | render(){
62 | return (
63 |
64 |
66 | )
67 | }
68 | }
69 |
70 | export {
71 | CreateLink,
72 | RemoveLink
73 | }
74 |
75 | export default CreateLink
76 |
--------------------------------------------------------------------------------
/examples/src/components/View.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ReactTransitionGroup from 'react/lib/ReactTransitionGroup'
3 | import ReactUI from 'react-ui/react-ui'
4 | import classNames from 'classnames';
5 |
6 | class View extends React.Component{
7 | constructor(props) {
8 | super(props);
9 | }
10 |
11 | render(){
12 | let navbar = this.props.navbar
13 | let page = this.props.page
14 | let toolbar =this.props.toolbar
15 |
16 | return (
17 |
18 |
19 | {/*-----navbar------*/}
20 |
21 | {navbar ? React.cloneElement(navbar, {
22 | key: (this.props.location ? this.props.location.pathname.concat('/navbar') : ReactUI.guid() ),
23 | pageName: location.pathname==='/' ? 'index' : location.pathname.charAt(0) === '/' ? location.pathname.substring(1) : location.pathname
24 | }) : '' }
25 |
26 |
27 | {/*-----pages-------*/}
28 |
29 | {React.cloneElement(page, {
30 | className: {'navbar-through': !!navbar, 'toolbar-through': !!toolbar, 'tabbar-labels-through': !!toolbar},
31 | key: (this.props.location ? this.props.location.pathname : ReactUI.guid() ),
32 | pageName: location.pathname==='/' ? 'index' : location.pathname.charAt(0) === '/' ? location.pathname.substring(1) : location.pathname
33 | })}
34 |
35 |
36 | {/*-----Toobar-------*/}
37 |
38 | { toolbar ? toolbar : ''}
39 | {/*-----toolbar end -------*/}
40 |
41 | );
42 | }
43 |
44 | }
45 |
46 | module.exports = View
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/examples/src/components/panels/RightPanel.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | require('react-ui/resources/less/lists.less')
3 | require('react-ui/resources/less/content-block.less')
4 |
5 | export default class RightPanel extends React.Component{
6 | render(){
7 | return (
8 |
9 |
14 |
15 |
16 |
17 |
18 |
This is a right side panel. You can close it by clicking outsite or on this link:
19 | close me .
20 | You can put here anything, even another isolated view, try it:
21 |
22 |
23 |
45 |
46 |
47 |
48 |
2 |
3 |
4 |
6 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/view.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | //import ReactTransitionGroup from 'react/lib/ReactTransitionGroup';
3 | import ReactTransitionGroup from 'ReactTransitionGroup'
4 | import ReactUI from './react-ui';
5 | import classNames from 'classnames';
6 |
7 | class View extends React.Component{
8 | constructor(props) {
9 | super(props);
10 | }
11 |
12 | render(){
13 | let navbar = this.props.navbar
14 | let page = this.props.page
15 | let toolbar =this.props.toolbar
16 |
17 | return (
18 |
19 |
20 | {/*-----navbar------*/}
21 |
22 | {navbar ? React.cloneElement(navbar, {
23 | key: (this.props.location ? this.props.location.pathname.concat('/navbar') : ReactUI.guid() ),
24 | pageName: location.pathname==='/' ? 'index' : location.pathname.charAt(0) === '/' ? location.pathname.substring(1) : location.pathname
25 | }) : '' }
26 |
27 |
28 | {/*-----pages-------*/}
29 |
30 | {React.cloneElement(page, {
31 | className: {'navbar-through': !!navbar, 'toolbar-through': !!toolbar, 'tabbar-labels-through': !!toolbar},
32 | key: (this.props.location ? this.props.location.pathname : ReactUI.guid() ),
33 | pageName: location.pathname==='/' ? 'index' : location.pathname.charAt(0) === '/' ? location.pathname.substring(1) : location.pathname
34 | })}
35 |
36 |
37 | {/*-----Toobar-------*/}
38 |
39 | { toolbar ? toolbar : ''}
40 | {/*-----toolbar end -------*/}
41 |
42 | );
43 | }
44 |
45 | }
46 |
47 | module.exports = View
48 |
49 |
50 |
51 |
--------------------------------------------------------------------------------
/examples/src/components/Tabbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Link, IndexLink } from 'react-router'
3 | import Navbar from './Navbar'
4 | import Page from './Page'
5 | let classNames = require('classnames');
6 |
7 | class Tabbar extends React.Component{
8 | constructor(props) {
9 | super(props);
10 | }
11 |
12 | handleTabClick(){
13 | Page.anim = false
14 | Navbar.anim = false
15 | //window.alert('cick')
16 | }
17 |
18 | render(){
19 | return (
20 |
21 |
22 |
23 | 首页
25 |
26 |
27 | 社团
30 |
31 |
32 | 类目
35 |
36 |
37 | 动态
40 |
41 |
42 |
44 | 4
45 |
46 | 设置
47 |
48 |
49 |
40 |
字体颜色
41 |
42 |
43 | {
44 | fontColorList.map((list, index) => {
45 | return (
46 |
47 | {
48 | list.map((val) => (
49 |
54 | ))
55 | }
56 |
57 | )
58 | })
59 | }
60 |
61 |
62 |
, panel)
31 | }
32 |
33 | render(){
34 | if(this.canBack === undefined){
35 | this.canBack = history.canBack;
36 | }
37 | return (
38 |
39 | {
40 | this.canBack ?
41 |
: ''
42 | }
43 |
Tabs Static
44 |
47 |
54 |
63 |
字形
64 |
65 | {
66 | fontShapList.map(val => (
67 |
68 |
70 | ))
71 | }
72 |
73 |
, panel)
35 | }
36 |
37 | render(){
38 | if(this.canBack === undefined){
39 | this.canBack = history.canBack;
40 | }
41 | return (
42 |
43 | {
44 | this.canBack ?
45 |
: ''
46 | }
47 |
Tabs Animated
48 |
51 |
58 |
43 |
字体颜色
44 |
45 |
46 | {
47 | fontColorList.map((list, index) => {
48 | return (
49 |
50 | {
51 | list.map((val) => (
52 |
56 | ))
57 | }
58 |
59 | )
60 | })
61 | }
62 |
63 |
64 |
25 | Modals
26 | Popover
27 | Tabs
28 | Side Panels
29 | List View
30 | Forms
31 |
32 | )
33 |
34 | ReactDOM.render(
44 | {
45 | this.canBack ?
46 |
: ''
47 | }
48 |
49 |
{this.props.title || ''}
50 |
53 |
37 |
38 |
39 | )
40 | }
41 | }
42 |
43 | class RemoveLink extends React.Component{
44 | constructor(props) {
45 | super(props);
46 | this.edit = props.edit
47 | this.state = {
48 | }
49 | }
50 |
51 |
52 | componentDidMount(){
53 | }
54 |
55 | handleRemoveLink(event){
56 | event.preventDefault()
57 | this.edit.removeLink()
58 | // this.doc.execCommand('insertHTML', false, '');
59 | }
60 |
61 | render(){
62 | return (
63 |
64 |
66 | )
67 | }
68 | }
69 |
70 | export {
71 | CreateLink,
72 | RemoveLink
73 | }
74 |
75 | export default CreateLink
76 |
--------------------------------------------------------------------------------
/src/umeditor/top-toolbar-editor.js:
--------------------------------------------------------------------------------
1 | import Editor from './editor'
2 | import React from 'react'
3 | import ContentEditable from 'react-contenteditable'
4 |
5 | // import FontSize from './tools/font-size'
6 | // import FontColor from './tools/font-color'
7 | // import BackColor from './tools/back-color'
8 | // import FontShape from './tools/font-shape'
9 | // import FontFamily from './tools/font-family'
10 | // import Justify from './tools/justify'
11 | import InsertImage from './tools/insert-image'
12 | // import ListItem from './tools/list-item'
13 | // import HeadLine from './tools/headline'
14 | import {CreateLink} from './tools/link'
15 | require('../resources/less/editor/top-toolbar.less')
16 | require('../resources/less/editor/rich-editor.less')
17 |
18 | class Toolbar extends React.Component{
19 | constructor(props) {
20 | super(props);
21 | this.handlers = this.props.handlers || {}
22 |
23 | }
24 |
25 | componentDidMount(){
26 | }
27 |
28 |
29 | render(){
30 | return (
31 |
37 | )
38 | }
39 | }
40 |
41 | class DefaultEditor extends Editor{
42 | constructor(props) {
43 | super(props);
44 | this.state = {
45 | value: this.props.value || ''
46 | }
47 | }
48 |
49 |
50 | render(){
51 | return (
52 |
53 |
54 |
55 |
61 |
62 | , panel)
40 | }
41 |
42 | render(){
43 | if(this.canBack === undefined){
44 | this.canBack = history.canBack;
45 | }
46 | return (
47 |
48 | {
49 | this.canBack ?
50 |
: ''
51 | }
52 |
Tabs Swipeable
53 |
56 |
63 |
20 | //
21 | // /* add it here, as a child of `/` */
22 | //
23 | // /*no used*/
24 | //
25 | //
26 | //
27 |
28 | // , document.getElementById('my-app'));
29 |
30 |
31 | import 'babel-polyfill';
32 | import React from 'react';
33 | import ReactDOM from 'react-dom';
34 | import { Router} from 'react-router'
35 | import history from './history'
36 | import rootRoute from './router'
37 | import 'react-ui/fast-clicks'
38 | require('react-ui/resources/less/intro.less');
39 | require('react-ui/resources/less/icons.less');
40 | require('react-ui/resources/less/views.less');
41 | require('react-ui/resources/less/pages.less');
42 | require('react-ui/resources/less/statusbar.less');
43 | require('react-ui/resources/less/toolbars.less');
44 | require('react-ui/resources/less/toolbars-pages.less');
45 | require('react-ui/resources/less/tabs.less');
46 | require('react-ui/resources/less/badges.less');
47 | require('./resources/less/app.less');
48 |
49 |
50 |
51 | // require('react-ui/resources/less/react-ui.ios.less')
52 |
53 | require('react-ui/resources/less/react-ui.ios.colors.less')
54 |
55 | require('./resources/less/app.less')
56 | ReactDOM.render(
57 |
44 |
字体颜色
45 |
46 |
47 | {
48 | fontColorList.map((list, index) => {
49 | return (
50 |
51 | {
52 | list.map((val) => (
53 |
58 | ))
59 | }
60 |
61 | )
62 | })
63 | }
64 |
65 |
66 |
50 |
突出显示
51 |
52 |
53 | {
54 | backColorList.map((list, index) => {
55 | return (
56 |
57 | {
58 | list.map((val) => (
59 |
64 | ))
65 | }
66 |
67 | )
68 | })
69 | }
70 |
71 |
72 |
').appendTo(rng.startContainer).html(browser.ie ? ' ' : '
50 |
突出显示
51 |
52 |
53 | {
54 | backColorList.map((list, index) => {
55 | return (
56 |
57 | {
58 | list.map((val) => (
59 |
64 | ))
65 | }
66 |
67 | )
68 | })
69 | }
70 |
71 |
72 |
',
50 | buttons: [
51 | {
52 | text: this.params.buttonsText.cancel
53 | },
54 | {
55 | text: this.params.buttonsText.ok,
56 | bold: true
57 | }
58 | ],
59 | onClick: function (modal, index) {
60 | if (index === 0 && callbackCancel) callbackCancel($(modal).find('.modal-text-input').val());
61 | if (index === 1 && callbackOk) callbackOk($(modal).find('.modal-text-input').val());
62 | }
63 | });
64 | }
65 | }
66 |
67 | Object.assign(Modals, {
68 | alert: MessageBox.alert.bind(MessageBox),
69 | confirm: MessageBox.confirm.bind(MessageBox),
70 | prompt: MessageBox.prompt.bind(MessageBox)
71 | })
72 | console.log('modals modals==',Modals)
73 | module.exports = MessageBox;
--------------------------------------------------------------------------------
/src/umeditor/plugins/image.js:
--------------------------------------------------------------------------------
1 | ///import core
2 | ///import plugins\inserthtml.js
3 | ///commands 插入图片，操作图片的对齐方式
4 | ///commandsName InsertImage,ImageNone,ImageLeft,ImageRight,ImageCenter
5 | ///commandsTitle 图片,默认,居左,居右,居中
6 | ///commandsDialog dialogs\image
7 | /**
8 | * Created by .
9 | * User: zhanyi
10 | * for image
11 | */
12 | /* eslint quotes : "off"*/
13 | import UM from '../um'
14 | // import $ from '../../dom'
15 | // import browser from '../core/browser'
16 | import utils from '../core/utils'
17 | UM.commands['insertimage'] = {
18 | execCommand:function (cmd, opt) {
19 | opt = utils.isArray(opt) ? opt : [opt];
20 | if (!opt.length) {
21 | return;
22 | }
23 | var me = this;
24 | var html = [], str = '', ci;
25 | ci = opt[0];
26 | if (opt.length == 1) {
27 | str = '';
36 |
37 | html.push(str);
38 |
39 | } else {
40 | for (var i = 0; ci = opt[i++];) {
41 | str = '
';
47 | html.push(str);
48 | }
49 | }
50 |
51 | me.execCommand('insertHtml', html.join(''), true);
52 | }
53 | };
--------------------------------------------------------------------------------
/src/umeditor/tools/headline.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import List from '../../lists'
3 | require('../../resources/less/forms.less')
4 |
5 | const headLineList = [
6 | {label: 'AaBb(正文)', value: 'p'},
7 | {label: 'AaBb(标题一)', value: 'h1'},
8 | {label: 'AaBb(标题二)', value: 'h2'},
9 | {label: 'AaBb(标题三)', value: 'h3'},
10 | {label: 'AaBb(标题四)', value: 'h4'}
11 |
12 | ]
13 | class HeadLine extends React.Component {
14 | constructor(props) {
15 | super(props);
16 | this.edit = props.edit
17 | this.state = {
18 | value: props.value
19 | }
20 | }
21 |
22 |
23 | handleChange(val){
24 | this.setState({
25 | value: val
26 | })
27 | this.edit.execCommand('paragraph', val)
28 | // $('.public-DraftEditor-content[contenteditable=true]')[0].blur()
29 | }
30 |
31 | render() {
32 |
33 | return (
34 |
35 |
样式
36 |
37 |
38 |
39 | {
40 | headLineList.map((item) => (
41 |
42 |
44 |
45 | {
46 | (() => {
47 | switch (item.value) {
48 | case 'h1': return
{item.label}
49 | case 'h2': return {item.label}
50 | case 'h3': return {item.label}
51 | case 'h4': return {item.label}
52 | default: return item.label
53 | }
54 |
55 | })()
56 |
57 | }
58 |
59 |
61 | ))
62 | }
63 |
64 |
65 |
66 |
73 |
对齐
74 |
75 | {
76 | justifyList.map(value => (
77 |
78 |
81 | ))
82 | }
83 |
84 |