Meta的开源力作:Lexical框架,富文本的未来

引言

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 预览:

功能介绍

基本功能

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

特色功能

分页

DOM结构树(命令模式)

绘图

便签

安装

React

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

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

bash 复制代码
npm install --save lexical @lexical/react

创建一个 React 组件,添加如下内容:

javascript 复制代码
    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}>
          <RichTextPlugin
            contentEditable={<ContentEditable />}
            placeholder={<div>请输入内容...</div>}
            ErrorBoundary={LexicalErrorBoundary}
          />
          <HistoryPlugin />
          <AutoFocusPlugin />
        </LexicalComposer>
      );
    }

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

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

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

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

typescript 复制代码
<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

效果如下:

Vue

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

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

安装:

bash 复制代码
npm install lexical lexical-vue # or pnpm or yarn

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

javascript 复制代码
    <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扩展示例:

typescript 复制代码
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>
  );

总结

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

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

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

相关推荐
lsjweiyi2 小时前
极简AI工具箱网站开源啦!
opencv·开源·微信支付·支付宝支付·百度ai·极简ai工具箱·ai图像处理
开源社3 小时前
一场开源视角的AI会议即将在南京举办
人工智能·开源
FreeIPCC3 小时前
谈一下开源生态对 AI人工智能大模型的促进作用
大数据·人工智能·机器人·开源
海害嗨3 小时前
阿里巴巴官方「SpringCloudAlibaba全彩学习手册」限时开源!
学习·开源
生命是有光的3 小时前
【开源风云】从若依系列脚手架汲取编程之道(八)
开源
HuggingFace5 小时前
Halo 正式开源: 使用可穿戴设备进行开源健康追踪
开源·健康追踪
时光追逐者9 小时前
.NET 9 中 LINQ 新增功能实操
开发语言·开源·c#·.net·.netcore·linq·微软技术
檀越剑指大厂11 小时前
Linux本地部署开源项目OpenHands基于AI的软件开发代理平台及公网访问
linux·人工智能·开源
胜天半子_王二_王半仙1 天前
c++源码阅读__ThreadPool__正文阅读
开发语言·c++·开源
FIT2CLOUD飞致云1 天前
案例研究|阿特斯的JumpServer分布式部署和多组织管理实践
运维·开源·堡垒机·jumpserver