Static prerender for AI / crawler

@jaceyi/lexical-editor

一个面向业务场景的 React 富文本编辑器，支持 HTML/JSON 双向数据流，适用于表单输入、内容管理与文档协作。

安装

npm install @jaceyi/lexical-editor

功能概览

文本格式：粗体、斜体、下划线、字号、字体、颜色、背景色
块级结构：标题、引用、有序/无序列表、段落对齐
扩展能力：链接、图片/文件上传、关键词高亮、@提及、格式刷
编辑控制：可编辑模式、只读模式、自动聚焦、历史记录
数据模式：支持 HTML 和 JSON 的外部输入与内部输出
国际化：内置中/英文语言包，支持自定义 locale

快速用法

这一段会直接写进构建产物的 HTML，方便在不执行 JavaScript 的情况下了解组件的接入方式。

HTML mode

import Editor, { useHTMLHandle } from '@jaceyi/lexical-editor';

function HTMLExample() {
  const [{ value, onChange }, editorProps] = useHTMLHandle({
    initialValue: '<p>Hello lexical editor</p>',
  });

  return (
    <>
      <Editor
        namespace="HtmlEditor"
        mode="html"
        {...editorProps}
      />
      <pre>{value}</pre>
    </>
  );
}

JSON mode

import Editor, { useJSONHandle } from '@jaceyi/lexical-editor';

function JSONExample() {
  const [{ value, onChange }, editorProps] = useJSONHandle({
    initialValue: {
      root: {
        type: 'root',
        version: 1,
        children: [],
      },
    },
  });

  return (
    <>
      <Editor
        namespace="JsonEditor"
        mode="json"
        {...editorProps}
      />
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </>
  );
}

使用说明

默认使用 HTML 模式；传 mode="json" 后，编辑器对外输出结构化 JSON。
namespace 必填，且同一页面内需要唯一。
value 用于受控更新，initialValue 只在首次初始化生效。
config 可以扩展 mentions、keywords、toolbar 与 onUploadFile 等能力。

API 文档

以下 API 覆盖编辑器的核心使用路径，可结合上方 Demo 快速上手。

Editor Props

源码（Editor）

参数名	类型	默认值	必填	说明
namespace	string	-	是	编辑器命名空间，必须保证页面内唯一
mode	'html' \| 'json'	'html'	否	编辑器数据模式；html 输出字符串，json 输出序列化对象
initialValue	string \| object	''	否	初始值，仅首次初始化时生效
value	string \| object	undefined	否	受控值，外部更新会同步到编辑器内容
onChange	(value) => void	undefined	否	内容变化回调。html 模式返回字符串，json 模式返回对象
isEditable	boolean	true	否	是否允许编辑，false 时为只读渲染
config	EditorConfig	{}	否	扩展配置，包含上传、提及、关键词等能力
themeMode	'light' \| 'dark'	'light'	否	编辑器主题模式。默认浅色；只按传入值生效，不读取系统主题、不使用缓存
locale	LocaleKey \| Partial<Locale>	'zh-CN'	否	编辑器语言配置。传 LocaleKey（'zh-CN' \| 'en-US'）使用内置语言包；传对象时按 Key 覆盖内置中文语言包，未提供的 Key 保持默认文案

EditorConfig

源码（EditorConfig）

参数名	类型	默认值	必填	说明
onUploadFile	(file: File) => Promise<{url: string; name: string}>	undefined	否	文件上传函数。图片插入图片节点，其他文件插入文件节点
mentions	MentionsPluginProps['mentions'] \| MentionsPluginProps	undefined	否	配置提及候选项或完整提及插件参数
keywords	string[] \| RegExp	undefined	否	关键词高亮匹配规则
toolbar	ToolbarFeatureKey[] \| false	undefined	否	工具栏功能配置。传 false 隐藏整个工具栏；传数组以白名单模式仅展示指定功能（如 ['bold', 'italic', 'link']）；不传则展示全部。可用值见 TOOLBAR_FEATURES 常量

样式覆盖与 CSS Layer

源码（index.scss）

参数名	类型	默认值	必填	说明
内置层	@layer lexical-editor	-	否	编辑器内置样式已放入 lexical-editor layer，调用方可以使用更晚声明的 layer 覆盖
普通 CSS 覆盖	unlayered css	-	否	调用方若使用普通 CSS（不在 layer 内），优先级天然高于内置 layer，可直接覆盖
主题变量	--lexicalEditor*	-	否	可通过覆盖 CSS Variables 自定义颜色；用户覆盖颜色优先于编辑器默认主题色

Hooks

源码（useEditorHandle）

参数名	类型	默认值	必填	说明
useHTMLHandle	(options?: { initialValue?: string }) => [outputProps, editorProps, editorRef]	-	否	用于 HTML 模式下的双向绑定
useJSONHandle	(options?: { initialValue?: string \| EditorJSONValue }) => [outputProps, editorProps, editorRef]	-	否	用于 JSON 模式下的双向绑定

Mentions 类型定义

MentionsPluginProps MentionItem

参数名	类型	默认值	必填	说明
MentionItem	{ text: string; value: string \| number } \| string	-	否	提及候选项类型。传字符串时仅作为展示和插入文本；传对象时可携带 value
MentionsPluginProps.mentions	MentionItem[]	[]	否	提及候选列表，匹配输入后展示建议项
MentionsPluginProps.trigger	string \| string[]	'@'	否	触发字符，可传单个字符或多个触发符
MentionsPluginProps.validCharsLength	number	50	否	触发字符后，允许匹配的最大字符长度
MentionsPluginProps.suggestionListLength	number	5	否	建议列表最多展示的条目数量

TOOLBAR_FEATURES

源码（consts）

参数名	类型	默认值	必填	说明
blockFormat	string	'blockFormat'	否	块级格式下拉（标题、列表、引用等）
bold	string	'bold'	否	加粗
italic	string	'italic'	否	斜体
underline	string	'underline'	否	下划线
strikethrough	string	'strikethrough'	否	删除线
fontColor	string	'fontColor'	否	字体颜色
backgroundColor	string	'backgroundColor'	否	背景色
formatPainter	string	'formatPainter'	否	格式刷
clearStyle	string	'clearStyle'	否	清除样式
fontFamily	string	'fontFamily'	否	字体选择
fontSize	string	'fontSize'	否	字号选择
blockAlign	string	'blockAlign'	否	段落对齐
link	string	'link'	否	链接插入
mention	string	'mention'	否	提及（需同时配置 mentions）
imageUpload	string	'imageUpload'	否	插入图片（需同时配置 onUploadFile）
fileUpload	string	'fileUpload'	否	文件上传（需同时配置 onUploadFile）

国际化 (Locale)

源码（locale）

参数名	类型	默认值	必填	说明
LocaleKey	'zh-CN' \| 'en-US'	'zh-CN'	否	内置语言标识，传字符串时自动匹配内置语言包
Locale	Partial<Locale>	-	否	语言包对象，按 Key 覆盖内置语言包（zh-CN），未提供的 Key 保持默认文案
zhCN	Locale	-	否	内置简体中文语言包，可直接导入使用或作为自定义的基准
enUS	Locale	-	否	内置英文语言包，可直接导入使用或作为自定义的基准