功能一览
一切都来自一个入口——ai-sparkwrite-editor(React)或 ai-sparkwrite-editor/vue(Vue)——或者用 RichTextKit 一次注册全部。在 useEditor 中注册扩展,在 RichTextProvider 内放置控件。“引入”一列列出的是每个功能的子路径,供不做 tree-shake 的打包器使用,效果等价。选项通过 .configure({ ... }) 传入;每个扩展也都支持共享的 toolbar、divider、spacer 和 shortcutKeys 选项。
核心
| 功能 | 引入 | 控件 | 值得注意的选项 |
|---|---|---|---|
| RichTextKit | ai-sparkwrite-editor、ai-sparkwrite-editor/vue | RichTextKit、RichTextKitToolbar、RichTextKitMenus | 每个功能一个键:false 或该扩展自己的选项 |
| Provider、工具栏原语 | ai-sparkwrite-editor | RichTextProvider、RichTextToolbar、RichTextToolbarMore、RichTextToolbarButton … | 见自定义 |
| 框架无关的核心 | ai-sparkwrite-editor/core | — | 扩展、粘贴规则、录制器、AI 传输层、翻译;不含 React——见框架支持 |
| Vue 3 UI | ai-sparkwrite-editor/vue | RichTextProvider、工具栏原语、控件、气泡菜单、对话框、AI 面板与写作台、节点视图 | 与 React 控件共用同一份样式表;见框架支持 |
| History | ai-sparkwrite-editor/history | RichTextHistory(撤销/重做) | depth |
| Heading | ai-sparkwrite-editor/heading | RichTextHeading | levels;点击块上方的空隙会作用于该块 |
| Bold、Italic、Underline、Strike、Code | ai-sparkwrite-editor/bold … | RichTextBold … | — |
| MoreMark | ai-sparkwrite-editor/moremark | RichTextMoreMark(上标、下标) | — |
| Color、Highlight | ai-sparkwrite-editor/color、ai-sparkwrite-editor/highlight | RichTextColor、RichTextHighlight | colors |
| FontFamily | ai-sparkwrite-editor/fontfamily | RichTextFontFamily | fontFamilyList;按语言和文档展示中日韩、天城文、孟加拉文字体栈 |
| FontSize | ai-sparkwrite-editor/fontsize | RichTextFontSize(compact) | fontSizes |
| LineHeight | ai-sparkwrite-editor/lineheight | RichTextLineHeight | lineHeights |
| TextAlign | ai-sparkwrite-editor/textalign | RichTextTextAlign | alignments、types |
| TextDirection | ai-sparkwrite-editor/textdirection | RichTextTextDirection | directions |
| Indent | ai-sparkwrite-editor/indent | RichTextIndent | minIndent、maxIndent |
| Clear | ai-sparkwrite-editor/clear | RichTextClear(清除格式) | — |
| FormatPainter | ai-sparkwrite-editor/formatpainter | RichTextFormatPainter | — |
块
| 功能 | 引入 | 控件 | 值得注意的选项 |
|---|---|---|---|
| BulletList、OrderedList、TaskList | ai-sparkwrite-editor/bulletlist … | RichTextBulletList … | — |
| Blockquote | ai-sparkwrite-editor/blockquote | RichTextBlockquote | — |
| CodeBlock | ai-sparkwrite-editor/codeblock | RichTextCodeBlock | 语言选择节点视图、detectLanguageFn、GitHub 明暗配色;导出 guessLanguage |
| Table | ai-sparkwrite-editor/table | RichTextTable、RichTextBubbleTable | 圆角、insertParagraphAfterTable(点击旁侧、⌘/Ctrl+Enter、右键菜单) |
| Divider | ai-sparkwrite-editor/divider | RichTextDivider | variants(内置 9 种、可编辑文字、编号)、defaultVariant、renderDivider、parseRules |
| Column | ai-sparkwrite-editor/column | RichTextColumn | insertColumns({ cols }) |
| Callout | ai-sparkwrite-editor/callout | RichTextCallout、RichTextBubbleCallout | 提示、技巧、重要、警告、危险 |
| Notice | ai-sparkwrite-editor/notice | RichTextNotice、RichTextBubbleNotice | 信息、成功、警告、技巧 —— 可编辑块组成的彩色提示框 |
| Details | ai-sparkwrite-editor/details | RichTextDetails | 可折叠块 |
| TableOfContents | ai-sparkwrite-editor/tableofcontents | RichTextTableOfContents | 实时更新的大纲节点 |
| HorizontalRule | ai-sparkwrite-editor/horizontalrule | RichTextHorizontalRule | 已被 Divider 取代;两者只注册其中一个 |
媒体与嵌入
| 功能 | 引入 | 控件 | 值得注意的选项 |
|---|---|---|---|
| Image | ai-sparkwrite-editor/image | RichTextImage、RichTextBubbleImage | upload、acceptMimes、maxSize、resourceImage;裁剪、图注、旋转;getImageChanges / markImagesSaved 用于处理已删除的上传 |
| ImageGif | ai-sparkwrite-editor/imagegif | RichTextImageGif | GIPHY_API_KEY |
| Video | ai-sparkwrite-editor/video | RichTextVideo、RichTextBubbleVideo | upload、resourceVideo |
| Attachment | ai-sparkwrite-editor/attachment | RichTextAttachment | upload |
| Embed | ai-sparkwrite-editor/iframe | RichTextIframe、RichTextBubbleIframe | YouTube、Vimeo、B 站、Loom、Spotify、Google 地图、Figma、Canva、Miro、CodePen、Gist、Google 文档/表格/幻灯片/表单、Airtable…… 共 35 个服务,或任意网页 |
ai-sparkwrite-editor/twitter | RichTextTwitter | x.com 与 twitter.com 链接 | |
| Katex | ai-sparkwrite-editor/katex | RichTextKatex、RichTextBubbleKatex | loadKatex(懒加载);AI"描述公式" |
| Mermaid | ai-sparkwrite-editor/mermaid | RichTextMermaid、RichTextBubbleMermaid | AI"描述图表" |
| Excalidraw | ai-sparkwrite-editor/excalidraw | RichTextExcalidraw、RichTextBubbleExcalidraw | — |
| Drawer | ai-sparkwrite-editor/drawer | RichTextDrawer、RichTextBubbleDrawer | 自由手绘 |
| Emoji | ai-sparkwrite-editor/emoji | RichTextEmoji | 懒加载 emoji 数据 |
| Mention | ai-sparkwrite-editor/mention | — | suggestion |
| Link | ai-sparkwrite-editor/link | RichTextLink、RichTextBubbleLink(悬停) | openOnClick、autolink |
写作辅助
| 功能 | 引入 | 控件 | 值得注意的选项 |
|---|---|---|---|
| AI | ai-sparkwrite-editor/ai | RichTextAI(工具栏按钮)、RichTextAIComposer(编辑器下方的写作台)、RichTextAIImprove(选区菜单)、/ai 斜杠命令条目、空行按空格键 | endpoint(你后端的一个接口地址)、generate(request, onChunk)、stream、spaceTrigger、documentContext、translateLanguages、renderResult、components.Panel;writeWithAI 将 Markdown 以真实节点的形式流入文档 |
| AI 自动补全 | ai-sparkwrite-editor/ai(AIAutocomplete) | 停顿后出现的灰色续写;Tab 采纳,Escape 取消 | enabled、delay、minChars、contextChars、maxTokens、prompt;toggleAIAutocomplete() |
| SlashCommand | ai-sparkwrite-editor/slashcommand | SlashCommandList | commandList、hiddenUntilSearched |
| RichPaste | ai-sparkwrite-editor/richpaste | — | wordLists、codeBlocks、detectLanguage |
| MarkdownPaste | ai-sparkwrite-editor/markdownpaste | — | 粘贴的 markdown 文本会变为内容 |
| SearchAndReplace | ai-sparkwrite-editor/searchandreplace | RichTextSearchAndReplace | — |
| ShortMessage | ai-sparkwrite-editor/shortmessage | — | shortcut、messages(文本扩展) |
| Recorder | ai-sparkwrite-editor/recorder | — | autoStart、recordSelection、onEntry;replayRecording |
| CodeView | ai-sparkwrite-editor/codeview | RichTextCodeView | 编辑 HTML 源码 |
导入与导出
| 功能 | 引入 | 控件 | 值得注意的选项 |
|---|---|---|---|
| ImportWord | ai-sparkwrite-editor/importword | RichTextImportWord | 内嵌图片的 upload |
| ExportWord | ai-sparkwrite-editor/exportword | RichTextExportWord | — |
| ExportPdf | ai-sparkwrite-editor/exportpdf | RichTextExportPdf | 使用编辑器样式表打印 |
| ExportMarkdown | ai-sparkwrite-editor/exportmarkdown | RichTextExportMarkdown | 没有 markdown 形式的节点会回退为 HTML |
气泡菜单
分别从 ai-sparkwrite-editor/bubble/<name> 引入:text、table、media(图片)、video、link、callout、notice、drawer、excalidraw、iframe、katex、mermaid、drag-handle。见气泡菜单。
语言
ai-sparkwrite-editor/locales/<code> 支持 en、zh_CN、hi、es、fr、bn、pt_BR、ru、id、de、ja、tr、vi、ko、it、hu_HU、fi。见国际化。
主题
ai-sparkwrite-editor/theme 导出 themeActions(setTheme、setBorderRadius、强调色)和 CODE_THEME。样式来自 ai-sparkwrite-editor/style.css;根元素带有 ai-sparkwrite-editor 类名。