Lexical 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Lexical 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Lexical 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 Alias_Travis
适用人群 未知
收录时间 2022-04-14

软件简介

注意:Lexical 目前处于早期开发阶段,API 和包可能会经常更改。

Lexical 是一个可扩展的 JavaScript Web 文本编辑器框架,强调可靠性、可访问性和性能。 Lexical 旨在提供一流的开发人员体验,因此用户可以轻松地制作原型并构建功能。结合高度可扩展的架构,Lexical 允许开发者创建编辑器,并在规模和功能上进行扩展。

以下是可以使用 Lexical 执行哪些操作的一些示例:

开始使用 React

注意:Lexical 不仅限于 React。 一旦创建了该库的绑定,Lexical 就可以支持任何基于 DOM 的底层库。

安装 lexical@lexical/react:

npm install --save lexical @lexical/react

下面是一个使用 lexical@lexical/react纯文本编辑器的示例

import {$getRoot, $getSelection} from 'lexical';
import {useEffect} from 'react';

import LexicalComposer from '@lexical/react/LexicalComposer';
import LexicalPlainTextPlugin from '@lexical/react/LexicalPlainTextPlugin';
import LexicalContentEditable from '@lexical/react/LexicalContentEditable';
import {HistoryPlugin} from '@lexical/react/LexicalHistoryPlugin';
import LexicalOnChangePlugin from '@lexical/react/LexicalOnChangePlugin';
import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';

const theme = {
  // Theme styling goes here
  ...
}

// When the editor changes, you can get notified via the
// LexicalOnChangePlugin!
function onChange(editorState) {
  editorState.read(() => {
    // Read the contents of the EditorState here.
    const root = $getRoot();
    const selection = $getSelection();

    console.log(root, selection);
  });
}

// Lexical React plugins are React components, which makes them
// highly composable. Furthermore, you can lazy load plugins if
// desired, so you don't pay the cost for plugins until you
// actually use them.
function MyCustomAutoFocusPlugin() {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    // Focus the editor when the effect fires!
    editor.focus();
  }, [editor]);

  return null;
}

// Catch any errors that occur during Lexical updates and log them
// or throw them as needed. If you don't throw them, Lexical will
// try to recover gracefully without losing user data.
function onError(error) {
  console.error(error);
}

function Editor() {
  const initialConfig = {
    theme,
    onError,
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <LexicalPlainTextPlugin
        contentEditable={<LexicalContentEditable />}
        placeholder={<div>Enter some text...</div>}
      />
      <LexicalOnChangePlugin onChange={onChange} />
      <HistoryPlugin />
      <MyCustomAutoFocusPlugin />
    </LexicalComposer>
  );
}

Lexical 是一个框架

Lexical 的核心是一个无依赖的文本编辑器框架。在设计上,Lexical 的核心尽量做到最小化。它将各个功能的逻辑通过插件接口包含在内,并在需要时使用。这确保了极大的可扩展性并将代码大小保持在最低限度。

为 Lexical 做贡献

  1. 克隆此仓库

  2. 安装依赖项

    • npm install
  3. 启动本地服务器并运行测试

    • npm run start
    • npm run test
      • 服务器需要为 e2e 测试运行

可选,但推荐使用 VS Code 进行开发

  1. 下载并安装 VSCode

  2. 安装扩展

    • Flow 语言支持
      • 确保遵循文件中的设置步骤
    • Prettier
      • 将 prettier 设置为默认格式化程序 editor.defaultFormatter
      • 可选:在保存 editor.formatOnSave 时设置格式
    • ESlint
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(1)
发表了资讯
04/15 08:20

Meta 开源可扩展的文本编辑器框架 Lexical

Meta(前 Facebook)近日在 GitHub 上开源了一个名为 Lexical 的项目,该项目是一个基于 JavaScript 的 Web 文本编辑器框架,具有可扩展、可访问和高性能的特性。Meta 在介绍中表示,结合 Lexical 高度可扩展的架构,开发者可以构建在大小和功能上均可以扩展的独特文本编辑器。 Lexical 的核心是一个文本编辑引擎 —— 一个为网络建立功能丰富的编辑器的平台。为了避免用户在每一个实现中重复编写相同的富文本功能,Lexical 还公...

3
14
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
1 评论
23 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部