网站首页 > 基础教程 正文
大家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!
什么是 Draft.js
Draft.js is a JavaScript rich text editor framework, built for React and backed by an immutable model.
Draft.js 是一个 JavaScript 富文本编辑器框架,专为 React 构建,并由不可变模型支持。具有以下突出特点:
- 可扩展且可定制:提供构建块,以实现从基本文本样式到嵌入式媒体等各种富文本编写体验。
- 声明性富文本:Draft.js 可无缝融入 React 应用程序,使用熟悉的声明性 API 抽象出渲染、选择和输入行为的细节。
- 不可变编辑器状态:Draft.js 模型使用 immutable-js 构建,提供具有功能状态更新的 API,并积极利用数据持久性来实现可扩展的内存使用。
注意:Draft.js 用于 Facebook 的生产,包括状态和评论输入、Notes 和 messenger.com。
目前 Draft.js 在 Github 通过 MIT 协议开源,有超过 22.6k 的 star、2.6k 的 fork、150k 的项目依赖量、代码贡献者 2250+、妥妥的前端优质开源项目。
如何使用 Draft.js
首先需要安装相应依赖:
npm install draft-js react react-dom babel-polyfill
// 或者
yarn add draft-js react react-dom es6-shim
npm install draft-js react react-dom
// 或者
yarn add draft-js react react-dom
Draft.js 依赖于 React 和 React DOM,因此也必须安装。下面是 Draft.js 的简单示例:
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
import 'draft-js/dist/Draft.css';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = editorState => this.setState({editorState});
// 注册 onChange 事件
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
ReactDOM.render(<MyEditor />, document.getElementById('container'));
RichUtils 包含有关 Web 编辑器可用的核心按键命令的信息,例如 Cmd+B(粗体)、Cmd+I(斜体)等。
开发者可以通过 handleKeyCommand 属性观察和处理按键命令,并将它们挂接到 RichUtils 中以应用或删除所需的样式。
import {Editor, EditorState, RichUtils} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = editorState => this.setState({editorState});
this.handleKeyCommand = this.handleKeyCommand.bind(this);
}
handleKeyCommand(command, editorState) {
const newState = RichUtils.handleKeyCommand(editorState, command);
if (newState) {
// 新的状态
this.onChange(newState);
return 'handled';
}
return 'not-handled';
}
render() {
return (
<Editor
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
/>
);
}
}
在 React 组件中,开发者还可以添加按钮或其他控件以允许用户在编辑器中修改样式。在上面的示例中使用了已知的按键命令,但可以添加更复杂的 UI 来提供这些丰富的功能。
下面是一个非常基本的示例,其中有一个 “粗体” 按钮用于切换粗体样式。
class MyEditor extends React.Component {
// 点击加粗按钮
_onBoldClick() {
this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
}
render() {
return (
<div>
<button onClick={this._onBoldClick.bind(this)}>Bold</button>
<Editor
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
onChange={this.onChange}
/>
</div>
);
}
}
Draft.js 还涵盖了很多高级主题,比如:装饰器、键绑定、管理焦点、块样式、自定义块渲染、自定义块组件、复杂内联样式、嵌套列表、文本方向、EditorState 竞争条件等等,因为篇幅问题本文不再过多展开。同时,更多关于 Draft.js 的用法和示例可以参考文末资料,本文不再过多展开。
参考资料
https://github.com/facebookarchive/draft-js
https://draftjs.org/docs/quickstart-rich-styling
https://www.youtube.com/watch?app=desktop&v=PuzqX5dxxKs
https://github.com/springload/draftail
猜你喜欢
- 2024-12-23 自动化模式中的MySQL 自动化数据
- 2024-12-23 前端使用openCV之图片处理 opencv实时处理图像
- 2024-12-23 Axure 8.0教程|实现环形动态进度条
- 2024-12-23 React 事件机制原理 react案例
- 2024-12-23 重新认识受控和非受控组件 重新认识受控和非受控组件的关系
- 2024-12-23 HarmonyOS应用开发-常用组件与布局
- 2024-12-23 鸿蒙应用开发实战-常用组件-滑动条组件
- 2024-12-23 用户界面干货盘点 用户界面分哪两种?
- 2024-12-23 鸿蒙开发-Stepper 与 StepperItem 组件
- 2024-12-23 鸿蒙Navigation处理启动页跳转到首页问题
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)