1.Draftjs 学习笔记

1.前期准备

为了方便我直接使用的是Dva-cli脚手架搭建的React 框架开始学习,dva是一个还不错的脚手架集成了redux 和 react还是挺不错,具体使用可以查看他的文档
接着我就跟着官网来,因为dva 已经引入了react ,直接加入draftjs即可

2.安装

npm install –save draft-js

3.使用

新建components/MyEditor.js,修改为如下:

import React from 'react';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
  }
}

MyEditor.propTypes = {
};

export default MyEditor;

修改roots/IndexPage.js如下:

import React, { Component, PropTypes } from 'react';
import MyEditor from '../components/MyEditor';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './IndexPage.less';

function IndexPage() {
  return (
    <MyEditor />
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

接着运行

npm start
浏览器打开 localhost:8989

你将看到一片空白,但是没事,现在你可以在最上面的空白处书写文字了,draftjs的基础运行环境算是搭建完成。


版权声明:本文为ohmyauthentic原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。