当前位置：首页 > 软件库 > Web应用开发 > 响应式 Web 框架 >

Lexical

Facebook 开源的文本编辑器框架

授权协议 MIT

开发语言 JavaScript

所属分类 Web应用开发、响应式 Web 框架

软件类型开源软件

地区不详

投递者宫瀚

操作系统跨平台

开源组织无

适用人群未知

软件概览

注意：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 做贡献

克隆此仓库
安装依赖项
- npm install
启动本地服务器并运行测试
- npm run start
- npm run test
  - 服务器需要为 e2e 测试运行

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

下载并安装 VSCode
安装扩展
- Flow 语言支持
  - 确保遵循文件中的设置步骤
- Prettier
  - 将 prettier 设置为默认格式化程序 editor.defaultFormatter
  - 可选：在保存 editor.formatOnSave 时设置格式
- ESlint

使用案例

编译器之词法分析器（Lexical Analyzer）

定义（来自维基百科）词法分析（英语：lexical analysis）是计算机科学中将字符序列转换为标记（token）序列的过程。进行词法分析的程序或者函数叫作词法分析器（lexical analyzer，简称lexer），也叫扫描器（scanner）。词法分析器一般以函数的形式存在，供语法分析器调用。任务描述为下面指定的简单编程语言创建一个词法分析器。程序应从文件和/或stdin读取输
boost之lexical_cast

1.C语言中的数值类型转换在 C 语言中提供了几个标准库函数，可以将字符串与整型，浮点型等进行转换。 atof() 将字符串转换为双精度浮点型值 atoi() 将字符串转换为整型值 atol() 将字符串转换为长整型值 itoa() 将整型值转换为字符串 gcvt() 将浮点数类型值转换为字符串 C/C++ 中提供的像 atoi，itoa，atof，gcvt 等这些函数都是可以实现字符串
解决 Unexpected lexical declaration in case block.报错

问题：写代码的时候突然报了 Unexpected lexical declaration in case block. 的错误描述：今天在写代码的时候突然报错了Unexpected lexical declaration in case block.，开始有点闷，后来发现把类型定义写在了switch里面，错误代码如下： switch (item.value) { // 整理 case R
Malformed OGNL expression: wxUnionid=null [org.apache.ibatis.ognl.TokenMgrError: Lexical error at

前言 mybatis进行保存时，报错错误信息 org.mybatis.spring.MyBatisSystemException: nested exception is org.apache.ibatis.builder.BuilderException: Error evaluating expression 'wxUnionid ！=null'. Cause: org.apache.iba
Caused by: org.apache.ibatis.ognl.TokenMgrError: Lexical error at line 1, column 43. Encountered:

前言报错错误信息 [2020-12-15 13:56:33] -- [INFO ]: [com.xxxx.phb.exception.ExceptionHandlerAdvice]<

Lexical

开始使用 React

Lexical 是一个框架

为 Lexical 做贡献

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

同类工具

相关阅读

相关文章

相关问答

相关文档