概观
Draft.js是一个用于在React中构建富文本编辑器的框架,由一个不可变模型提供支持,并通过跨浏览器差异进行抽象。
Draft.js可以轻松构建任何类型的富文本输入,无论您是只是想支持一些内联文本样式还是构建复杂的文本编辑器来编写长篇文章。
Draft.js于2016年2月在React.js Conf推出
安装
Draft.js通过npm分发。它依赖于必须同时安装的React和React DOM
npm install --save draft-js react react-dom
# or alternately
yarn add draft-js react react-domDraft.js使用一些现代化的ecmascript功能,这些功能对IE11不可用,而不是create-react-app的默认配置文件的一部分。如果您遇到问题,请尝试在草稿旁边安装垫片或polyfill。
npm install --save draft-js react react-dom babel-polyfill
# or
yarn add draft-js react react-dom es6-shimAPI更改通知
在开始之前,请注意我们最近更改了草稿中实体存储的API。最新版本v0.10.0支持旧API和新API。继此之后,v0.11.0将会删除旧的API。如果您有兴趣帮助或跟踪进度。
用法
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')
);由于Draft.js支持unicode,因此您的HTML文件的块中必须包含以下元标记:
<meta charset="utf-8" />原文链接:https://draftjs.org/docs/overview.html#content
各种翻译工具齐上,如有问题,请指正!