百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

为何强烈推荐 Facebook 开源强大富文本编辑器 Draft.js ?

liuian 2024-12-30 05:16 25 浏览

家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!

什么是 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

相关推荐

用python操作excel、word、pdf非常容易,迅速教会你

你会用python操作excel、word、pdf吗?不会也没关系,这篇文章教会你~【文末领取】案例篇幅有限,给大家准备了电子版PDF获取方式:...

不同类型的文本、Word文档、Excel文档和图片将它们转换为PDF格式

要根据不同类型的文本、Word文档、Excel文档和图片将它们转换为PDF格式,你可以使用Python中的不同库来实现。下面是一个示例代码,展示了如何使用不同的库来处理不同类型的文件并将其转换为PDF...

10分钟实现PDF转Word神器!看DeepSeek如何用Python解放打工人

开篇痛点每个被PDF折磨过的职场人都懂——领导发来的扫描件要修改,手动抄到Word需要2小时;网上下载的报告想复制数据,却变成乱码…今天我们用Python+DeepSeek,10分钟打造一个智能转换工...

第12天 | 12天搞定Python,word和pdf

其实,Python除了对excel的支持很nice之外,对word、ppt和pdf也不赖的,上一篇《第12天|12天搞定Python,让excel飞起来》说了excel方面的内容,这一篇补上Py...

用python轻松操作excel、word、pdf吗?这篇文章教会你!拿走不谢

你会用python操作excel、word、pdf吗?不会也没关系,这篇文章教会你~【文末领取】案例篇幅有限,给大家准备了电子版PDF获取方式:...

Python开发打印服务(1)

Python开发打印服务(1)1.需求背景在项目开发中,我们经常会遇到打印预览、打印的需求。比如:我们在开发进销存或者其他系统应用时,经常会按照客户的需求来定制报表等。在Web项目中,实现打印预览...

零代码编程:用ChatGPT将PDF文件的表格批量转为Excel表格

电脑中有几百个PDF文件,文件内容格式一致,每个PDF文件第一页是一个表格。想把这几百个PDF文件里面的表格都提取出来,转为excel表,该怎么办?打开ChatGPT(一定要用GPT4,编程能力很强。...

用python操作excel、word、pdf非常迅速方便,迅速教会你

你会用python操作excel、word、pdf吗?不会也没关系,这篇文章教会你~【文末领取】案例篇幅有限,给大家准备了电子版PDF获取方式:...

PDF转换技巧:如何免费将 PDF 转换为 Excel

随着数字文档的使用不断增加,对高效和值得信赖的文档转换工具的需求也在增加。将PDF文件转换为Excel电子表格(XLS)可能具有挑战性,但这篇文章旨在缓解这些困难。这是带有分步说明的指南。...

PDF转Excel要收费?python几行代码帮你免费搞定(附代码)

写在前面经常在学习或工作中需要从PDF获取一些表格数据,直接用PDF阅读器复制的话,很难复制出来,使用PDF转Excel的软件,又需要收费。这时候,可以使用我们强大的python,几行代码就能把pdf...

python将PDF格式文档转换为excel文档

首先安装pdfplumber库pipinstallpdfplumberopenpyxl然后转换#导入两个模块importpdfplumberimportpandasaspd...

用DEEPSEEK写PDF转为Excel 程序

今天学校发了《2027通用版普通高校拟在山东招生专业(类)选考科目要求》(本科)文件为PDF版要转为化Excel用DEEPSEEK开发过程提问:写一个把PDF内容按着原来格式转化为EXCELL表格电脑...

用DeepSeek+Trae 自己写PDF表格转为EXCEL表格

如何将下面PDF表格转为EXCEL能更好统计在TRAE提问:新建窗口-选择文件夹-写一个PDF转excel电脑程序:样式不变,界面有选择文件,有输出文件,显示进度及页码,开始,暂停,退出,实现所...

Python一行代码实现PDF转Excel

第三方包tabula工具适用于从PDF中提取可复制(非图片格式)的表格数据,并输出表格安装pipinstalltabula-py函数调用df=tabula.read_pdf("PDF文件...

Python教程:python字典zip函数用法 - 学习如何操作字典

知识星球:写代码那些事如果你有收获|欢迎|点赞|关注|转发这里会定期更新|大厂的开发|架构|方案设计这里也会更新|如何摸鱼|抓虾欢迎来到写代码那些事!在Python编程中,字典(Dictionary)...