Draft.js是一个用React实现的富文本编辑器

Ali18E 8年前

来自： http://ljinkai.github.io/2016/02/27/Draft-js/

Draft.js是一个用React实现的富文本编辑器。由非死book出品。

Draft.js可以很容易的构建任何富文本的输入，甚至是多行的文本样式或者是复杂结构的文章。

在Draft.js的世界里，任何都是可定制的-提供可构建的区块来达到自定义的控制用户交互。

安装：

npm install --save draft-js react react-dom

使用：

import React from 'react';  import ReactDOM from 'react-dom';  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} />;    }  }    ReactDOM.render(    <MyEditor />,    document.getElementById('container')  );

特性一览：

  • 实体
  • 装饰
  • 按键绑定
  • 焦点控制
  • 区块样式
  • 自定义区块组件
  • 复杂行内样式
  • 嵌入列表
  • 文本方向
  • 常见问题
  • API索引：
  • 编辑组件
  • 编辑状态
  • 内容状态
  • 内容区块
  • 字符元数据
  • 实体
  • 选择状态
  • 数据会话
  • 修改器

项目地址

</div>

相关经验