Meta的开源力作：Lexical框架，富文本的未来

image

引言

Lexical 是一个由 Facebook（现在称为 Meta）开源的可扩展 JavaScript Web 文本编辑器框架。

这个框架特别强调了三个核心特性：可靠性、可访问性以及高性能。

旨在为开发者创造最优的开发体验。

以下是 Lexical 框架的几个关键特点和能力：

可扩展性：

Lexical 的设计允许开发者轻松地创建从简单到极为复杂的文本编辑器。

其架构高度可扩展，意味着你可以根据需求添加自定义功能，比如富文本格式、Markdown 支持、自定义UI组件（如工具栏）等，而这一切都可以通过扩展插件来实现。

可靠性：

框架的核心关注点之一是确保编辑器在各种条件下都能稳定工作，减少崩溃或数据丢失的风险，这对于提升用户体验至关重要。

可访问性：

Lexical 内置了对可访问性的支持，确保创建的编辑器能够被广泛的用户群体所使用，包括那些依赖辅助技术的用户。

高性能：

优化的内部机制使得 Lexical 能够处理大规模的文本编辑任务而不牺牲响应速度，这对于提升用户交互体验非常关键。

与React集成：

虽然 Lexical 并不仅限于 React，但它提供了与 React 深度集成的能力，使得在 React 应用中使用Lexical变得非常直接。同时，理论上它也可以支持任何基于DOM的前端库，只要有相应的绑定实现。

开发者体验：

Lexical 致力于简化开发流程，让开发者能够快速原型设计并充满信心地构建功能。这包括清晰的文档、丰富的示例代码以及易于理解的 API 设计。

模块化和可定制：

框架的模块化设计意味着你可以按需加载功能，只引入你真正需要的部分，从而保持最终应用的轻量级。

Lexical 的核心尽量做到最小化。

Lexical 并不直接关注单体编辑器倾向于做的事情——例如 UI 组件、工具栏或富文本功能。

相反，这些功能的逻辑可以通过插件接口包含在内，并在需要时使用。

这确保了极大的可扩展性并将代码大小保持在最低限度。

github：https://github.com/facebook/lexical

官方 playground 预览：
在这里插入图片描述

功能介绍

基本功能

基本功能包括：多级标题、字体、撤销、回退、字体大小、加粗、斜体、链接、字体颜色、字体背景、图片、表格、待办、有序列表、无序列表、水平线、引用

特色功能

分页
image

DOM结构树（命令模式）

image

绘图

image

便签

image

安装

React

将React放第一是因为官方在UI层已基于React封装好了所有的组件，开箱即用。

安装 lexical 核心包与 lexical/react 扩展包：

npm install --save lexical @lexical/react

创建一个 React 组件，添加如下内容：

    import {$getRoot, $getSelection} from 'lexical';import {useEffect} from 'react';import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';import {LexicalComposer} from '@lexical/react/LexicalComposer';import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';import {ContentEditable} from '@lexical/react/LexicalContentEditable';import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';function onError(error) {console.error(error);}function Editor() {const initialConfig = {namespace: 'MyEditor',theme:{// 自定义各组件样式名},onError,};return (<LexicalComposer initialConfig={initialConfig}><RichTextPlugincontentEditable={<ContentEditable />}placeholder={<div>请输入内容...</div>}ErrorBoundary={LexicalErrorBoundary}/><HistoryPlugin /><AutoFocusPlugin /></LexicalComposer>);}

这里还有个坑，如果大家在这时通过浏览器预览组件，会发现页面上就只有一个输入框。

这是因为官方团队并未将 lexical 需要的全局 css样式 封装进组件，需要大家手动添加，样式文件地址：

https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/index.css

这里在列举一些常用组件，大家可以按需引入:

<ToolbarPlugin /> // 工具栏
<DragDropPaste /> // 拖放粘贴
<AutoFocusPlugin /> // 自动聚焦
<AutoLinkPlugin /> // 自动链接
<ListPlugin /> // 列表
<CheckListPlugin /> // 代办
<CodeHighlightPlugin /> // 代码块
<TabIndentationPlugin /> // 缩进
<LinkPlugin /> // 链接
<HorizontalRulePlugin /> // 水平线
<PageBreakPlugin /> // 翻页
<ImagesPlugin /> // 图片
<TablePlugin /> // 表格

上述提到的组件均可在 lexical-playground 中找到，附上地址：

https://github.com/facebook/lexical/blob/main/packages/lexical-playground

效果如下：

image

Vue

官方并没有提供 Vue 版本，不过在 github 上已经有开发者使用 TS 完成了其 Vue 版本的基础封装。

github: https://github.com/wobsoriano/lexical-vue

安装：

npm install lexical lexical-vue # or pnpm or yarn

组件的使用都大同小异，这里省略了部分，仅保留核心代码示意：

    <script setup lang="ts">import {...LexicalRichTextPlugin,} from 'lexical-vue'</script><template><ToolbarPlugin /><div class="editor-container"><div className="editor-inner"><LexicalRichTextPlugin><template #contentEditable><div class="editor-scroller"><div class="editor"><ContentEditable /></div></div></template><template #placeholder><div class="editor-placeholder">Enter some text...</div></template></div></div></template>

vue版本的 playground 地址：

https://github.com/wobsoriano/lexical-vue/tree/main/playground

原生JS

使用原生JS需要自己来完成UI层的所有工作，如果大家在UI上没有定制化需求，不建议使用原生。

这里附上原生接入方式；https://lexical.dev/docs/getting-started/quick-start

扩展

Lexical 的核心在于其插件架构。

每个功能（如自动完成、拼写检查、格式化等）通常都是作为插件存在的。

开发者可以通过创建或修改插件来增加新功能或调整现有行为。

创建自定义插件

定义插件类：首先，你需要创建一个新的插件类，继承自 Lexical 提供的基类，如 LexicalPlugin 。

实现生命周期方法：大多数插件需要实现特定的生命周期方法，如初始化(initialize)、订阅编辑器事件(subscribe)和清理(dispose)。

注册插件：在编辑器实例化时，通过编辑器的配置选项将你的插件注册进去。

这里提供一个官方的React扩展示例：

function MyOnChangePlugin({ onChange }) {const [editor] = useLexicalComposerContext();useEffect(() => {return editor.registerUpdateListener(({editorState}) => {onChange(editorState);});}, [editor, onChange]);return null;
}function Editor() {// ...const [editorState, setEditorState] = useState();function onChange(editorState) {const editorStateJSON = editorState.toJSON();setEditorState(JSON.stringify(editorStateJSON));}return (<LexicalComposer initialConfig={initialConfig}>{/*...*/}<MyOnChangePlugin onChange={onChange}/></LexicalComposer>);

总结

我们介绍了 lexical 的 React、Vue和原生JS的安装，并按照接入的难易程度推荐了使用方式，然后了解基本的插件扩展流程，相信大家对lexical已经有了一定的了解。

本文是对Lexical的基本介绍，所以文中并未提到lexical中例如核心生命周期、事件的派发与注册、协同扩展等，大家在需要的场景可自行研究。

– 欢迎点赞、关注、转发、收藏【我码玄黄】，gonghao同名

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/21572.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用conda环境安装pythonocc-core

使用conda环境安装pythonocc-core

conda环境安装pythonocc库 基本环境 操作系统:Ubuntu 22.04 conda 23.11.0 安装pythonocc-core conda create --name pyocc python3.10 conda activate pyocc conda install -c conda-forge pythonocc-core7.8.1也可参考下面的官方地址 pythonocc-core 官方git地址 conda官…
阅读更多...
Create Mode Waveguide Element (模式波导仿真的数据用于 INTERCONNECT 中)

Create Mode Waveguide Element (模式波导仿真的数据用于 INTERCONNECT 中)

Create Mode Waveguide Element 模式波导仿真的数据用于 INTERCONNECT 中 引言正文模式求解引言 本文，我们介绍如何将如何创建一个可以让用户导入频率相关的性质（比如有效折射率，损耗，群速度，色散等等）到 INTERCONNECT 中的 Mode Waveguide 器件。该器件可以是来自 Mode…
阅读更多...
苏宁电商数据揭秘：掌握苏宁API接口，一键解锁无限商机

苏宁电商数据揭秘：掌握苏宁API接口，一键解锁无限商机

苏宁API接口是一套开放的、基于HTTP协议的接口&#xff0c;它允许开发者通过编程方式访问苏宁平台上的商品、订单、用户等信息。这些接口支持多种数据格式&#xff0c;如JSON和XML&#xff0c;并提供了完善的错误处理和权限控制机制。 要使用苏宁API接口&#xff0c;首先需要在…
阅读更多...
wireshark 二次开发

wireshark 二次开发

一、 Windows 准备 1、源代码下载 Git&#xff1a;https://github.com/wireshark/wireshark 2、 准备Visual C 要编译wireshark&#xff0c;开发电脑上应该安装了Visual Studio并包括了Visual C&#xff0c;请至少安装Visual Studio 2010以减少不必要的麻烦。 visual studio …
阅读更多...
媳妇面试了一家公司，期望月薪20K，对方没多问就答应了，只要求3天内到岗，可我总觉得哪里不对劲。

媳妇面试了一家公司，期望月薪20K，对方没多问就答应了，只要求3天内到岗，可我总觉得哪里不对劲。

“20k&#xff01;明天就来上班吧&#xff01;” 听到这句话&#xff0c;你会不会两眼放光&#xff0c;激动得差点跳起来&#xff1f; 朋友媳妇小丽&#xff0c;最近就经历了这样一场“梦幻面试”。然而&#xff0c;事情的发展却远没有想象中那么美好…… “这公司也太好了吧…
阅读更多...
新闻发稿:14种新闻媒体推广中的成功案例-华媒舍

新闻发稿:14种新闻媒体推广中的成功案例-华媒舍

新闻媒体推广是企业宣传与推广的重要手段之一。通过合理选择和运用新闻媒体&#xff0c;企业可以有效地提升品牌知名度和影响力&#xff0c;吸引更多的目标受众。本文将介绍14种新闻媒体推广中的成功案例&#xff0c;通过这些案例的分享&#xff0c;希望能为企业在新闻媒体推广…
阅读更多...
AWS EC2服务器开启root密码，SSH登录

AWS EC2服务器开启root密码，SSH登录

1) EC2 Instance Connect连接&#xff0c;更改root密码 sudo passwd root 2&#xff09;接着切换到切换到 root 身份&#xff0c;编辑 SSH 配置文件 $ sudo -i$ vi /etc/ssh/sshd_configPasswordAuthentication no&#xff0c;把 no 改成 yes #PermitRootLogin prohibit-passw…
阅读更多...
论文降重技巧：AI工具如何助力论文原创性提升？

论文降重技巧：AI工具如何助力论文原创性提升？

论文降重一直是困扰各界毕业生的“拦路虎”&#xff0c;还不容易熬过修改的苦&#xff0c;又要迎来降重的痛。 其实想要给论文降重达标&#xff0c;我有一些独家秘诀。话不多说直接上干货&#xff01; 1、同义词改写&#xff08;针对整段整句重复&#xff09; 这是最靠谱也是…
阅读更多...
动态规划1：1137. 第 N 个泰波那契数

动态规划1：1137. 第 N 个泰波那契数

动态规划解题步骤&#xff1a; 1.确定状态表示&#xff1a;dp[i]是什么 2.确定状态转移方程&#xff1a;dp[i]等于什么 3.初始化&#xff1a;确保状态转移方程不越界 4.确定填表顺序&#xff1a;根据状态转移方程即可确定填表顺序 5.确定返回值 题目链接&#xff1a;1137…
阅读更多...
Python管理PVE（Proxmox VE）云平台--节点资源统计2

Python管理PVE（Proxmox VE）云平台--节点资源统计2

一、前言 承接上文&#xff1a;Python管理PVE&#xff08;Proxmox VE&#xff09;云平台–节点资源统计 将cpu、内存、磁盘融入到一个脚本中&#xff0c;新增总资源占用计算模块&#xff0c;更直观的看出剩余未分配资源。 二、步骤 1.代码 # -*- coding: utf-8 -*- import o…
阅读更多...
条件变量--std::condition--c++11

条件变量--std::condition--c++11

教程 链接1 函数 wait() 等待(阻塞)线程。 notify_one() 唤醒一个等待的线程。 notify_all() 唤醒所有等待的线程。
阅读更多...
城市低空经济“链接力”指数报告（2024）

城市低空经济“链接力”指数报告（2024）

来源&#xff1a;城市进化论&火石创造 近期历史回顾&#xff1a;2024年NoETL开启自动化数据管理新时代白皮书.pdf 创新引领用户“换新生活”-从AWE2024看家电及消费电子行业发展趋势报告&#xff08;精简版&#xff09;.pdf 2024智能网联汽车“车路云一体化”规模建设与应用…
阅读更多...
c++ 产生临时对象的情况和解决方案

c++ 产生临时对象的情况和解决方案

1 以传值的方式给函数攒底参数。 这个不用说&#xff0c;值传递。 2 类型转换生成的临时对象/隐式类型转换以保证函数调用成功 举例1&#xff1a; # include <iostream>using namespace std;class CTempValue { public:int val1;int val2; public:CTempValue(int v1 …
阅读更多...
在spring框架的基础上自定义autowired注解

在spring框架的基础上自定义autowired注解

在Spring框架的基础上自定义Autowired注解是不可能的&#xff0c;因为注解本身是Java语言的一部分&#xff0c;并且Autowired是Spring框架提供的注解&#xff0c;用于实现自动装配。但是&#xff0c;你可以创建自己的注解&#xff0c;并结合Spring框架的扩展机制来实现类似的功…
阅读更多...
3DMAX样条线轮廓修改器插件SplineOffset安装使用方法

3DMAX样条线轮廓修改器插件SplineOffset安装使用方法

3DMAX样条线轮廓修改器插件安装使用教程 3DMAX样条线轮廓插件SplineOffset是3dMax的一个修改器&#xff0c;它可以创建多个样条线克隆&#xff0c;并可以选择增量增加或减少偏移、平移和旋转。在许多方面&#xff0c;它类似于3dMax的内置阵列工具与样条线偏移功能相结合。 3DM…
阅读更多...
享元模式介绍（含案例代码）

享元模式介绍（含案例代码）

学习目标&#xff1a; 了解享元模式 学习内容&#xff1a; 享元模式&#xff08;Flyweight Pattern&#xff09;是一种结构型设计模式&#xff0c;旨在减少创建对象的数量&#xff0c;以节省内存和提高性能。这个模式通过共享尽可能多的细节来有效地支持大量细粒度对象。 享元…
阅读更多...
PTA 7-7 后序和中序构造二叉树

PTA 7-7 后序和中序构造二叉树

本题目要求用后序序列和中序序列构造一棵二叉树&#xff08;树中结点个数不超过10个&#xff09;&#xff0c;并输出其先序序列。 输入格式: 在第一行中输入元素个数。 第二行中输入后序序列&#xff0c;用空格分隔。 第三行中输入中序序列&#xff0c;用空格分隔。 输出格…
阅读更多...
Go 编程风格指南 - 最佳实践

Go 编程风格指南 - 最佳实践

Go 编程风格指南 - 最佳实践 原文&#xff1a;https://google.github.io/styleguide/go 概述 | 风格指南 | 风格决策 | 最佳实践 注意&#xff1a; 本文是 Google Go 风格 系列文档的一部分。本文档是 规范性(normative) 但不是强制规范(canonical)&#xff0c;并且从属于Goo…
阅读更多...
C# type.GetProperty使用 Type.GetProperties() 获取不到值的解决方法

C# type.GetProperty使用 Type.GetProperties() 获取不到值的解决方法

C# type.GetProperty使用 Type.GetProperty 方法用于获取当前 Type 的指定属性。它接受一个字符串参数&#xff0c;该字符串是你要获取的属性的名称。如果找到了匹配的属性&#xff0c;它会返回一个 PropertyInfo 对象&#xff1b;如果没有找到&#xff0c;它会返回 null。 下…
阅读更多...
进入mysql报错：bash：/bin/mysql：没有那个文件或目录

进入mysql报错：bash：/bin/mysql：没有那个文件或目录

问题分析&#xff1a; 有可能把/bin下面的mysql文件删除 解决方案&#xff1a; 卸载已安装MySQL&#xff0c;重新安装一遍 卸载步骤&#xff1a; 在CentOS系统中卸载MySQL可以通过以下步骤进行&#xff1a; 1、停止MySQL服务&#xff1a; sudo systemctl stop mysqld 2…
阅读更多...
最新文章

Copyright @ 2022~2023