推荐项目:Draft.js - 轻松构建富文本编辑器
Draft.js 是 Facebook 开发的一个富文本编辑器框架,旨在构建文本编辑器时提供灵活性和可以维护性。以下是一个简单的例子,展示如何使用 Draft.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(),
};
}
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
placeholder="Enter some text..."
/>
);
}
}
export default MyEditor;
这段代码创建了一个简单的富文本编辑器组件,其中包含了 Editor
组件,它是 Draft.js 的核心部分。EditorState
维护编辑器的状态,onChange
方法用于监听用户的输入并更新状态。这个例子展示了如何将 Draft.js 集成到一个现代的 React 应用中。
评论已关闭