概述

译注:本文需要 React.JS 和 ECMAScript 6作为基础知识,如果你还了解 Immutable.js 就更好了

Draft.js is a framework for building rich text editors in React, powered by an immutable model and abstracting over cross-browser differences.

Draft.js 是一个用来构建 React 富文本编辑器的框架,支持 Immutable 模型和跨浏览器兼容性。

Draft.js makes it easy to build any type of rich text input, whether you're just looking to support a few inline text styles or building a complex text editor for composing long-form articles.

Draft.js 很容易构建任何类型的富文本输入框,无论你只是想支持一些行内文本样式还是构建一个复杂的、创作长篇文章的文本编辑器。

Draft.js was introduced at React.js Conf in February 2016.

Draft.js 于2016年2月在 React.js Conf 上推出。

(一段youtube视频)

(一段youtube视频)

(一段youtube视频)

安装

Currently Draft.js is distributed via npm. It depends on React and React DOM which must also be installed.

目前 Draft.js 是通过 npm 发布的。它依赖于 React 和 React DOM ,这两者必须被安装。

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

API更改通知

Before getting started, please be aware that we recently changed the API of Entity storage in Draft. The latest version, v0.10.0, supports both the old and new API. Following that up will be v0.11.0which will remove the old API. If you are interested in helping out, or tracking the progress, please follow issue 839 .

在开始之前,请注意,我们最近改变了 Entity storage 在 Draft 中的 API 。最新的版本,v0.10.0,同时支持旧的和新的 API 。接下来的v0.11.0将删除旧的 API 。如果您有兴趣帮助或跟踪进度,请跟踪 issue 839

使用

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() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

Because Draft.js supports unicode, you must have the following meta tag in the<head></head>block of your HTML file:

因为 Draft.js 支持 Unicode ,你必须在你的 HTML 文件的<head></head>区块中使用以下 meta 标签:

<meta charset="utf-8" />

Next, let's go into the basics of the API and learn what else you can do with Draft.js.

接下来,让我们进入 API 基础,了解你可以用 Draft.js 做什么。

results matching ""

    No results matching ""