尧图网站建设 
WYSIWYGMarkdown双模编辑Cabinet Tiptap编辑器的完整使用指南【免费下载链接】cabinetAI-first knowledge base and startup OS项目地址: https://gitcode.com/gh_mirrors/cabinet3/cabinetCabinet 是一款 AI 优先的本地知识库Knowledge Base它的核心写作体验由基于 TiptapProseMirror构建的双模编辑器提供你可以在所见即所得WYSIWYG富文本视图和原始 Markdown 源码视图之间一键切换而内容始终以 Markdown 格式落盘方便版本管理与迁移。一、双模编辑器是怎么工作的打开任意页面你会进入由 editor.tsx 实现的KBEditor组件。它的设计可以概括为三句话存储层是 Markdown每次编辑时编辑器把富文本 DOM 转回 Markdownto-markdown.ts页面就是一个普通的.md文件编辑层是 Tiptap加载页面时Markdown 先被渲染成 HTMLto-html.ts交给 ProseMirror 编辑获得流畅的打字体验双模式随时切换工具栏右侧的Markdown / Preview按钮editor-toolbar.tsx让你在富文本视图和原始源码textarea之间自由切换改动实时同步。对新手来说这意味着想排版就点按钮想精确控制语法就切源码模式两者永不冲突。二、快速上手5 个最高频技巧快捷键 / 操作作用/打开斜杠命令菜单标题、表格、图片、Callout、公式……⌘S/CtrlS保存页面状态栏会显示 Saving…/Saved⌘F/CtrlF页内查找⌘E/CtrlE给选中文本添加/编辑链接直接粘贴视频 URL自动识别并嵌入 YouTube、Vimeo、Loom 等媒体这组快捷键在编辑器底部状态栏有常驻提示editor.tsx。粘贴即嵌入是体验亮点把图片文件直接拖进页面会自动上传并插入粘贴一个纯 URL 时编辑器会智能判断它是普通链接还是可嵌入媒体甚至弹出「链接 vs 嵌入」的内联小菜单让你选择editor.tsx。三、工具栏功能清单从排版到 RTL工具栏采用单行可横向滚动的布局覆盖约 35 个常用命令分为主区和扩展区两组主区始终可见标题 H1–H3、加粗、斜体、下划线、删除线、行内代码链接、文字颜色、荧光笔高亮无序/有序列表、引用块、任务清单Checklist、代码块、分割线扩展区四种对齐方式、上下标插入图片、视频、第三方嵌入YouTube、X、Spotify 等撤销/重做、RTL 方向切换支持阿拉伯语、希伯来语等从右到左书写每个按钮都会随光标位置实时点亮当前生效的格式状态工具条支持左右箭头和滚轮水平滚动editor-toolbar.tsx。四、斜杠命令菜单不碰工具栏也能写完整篇文档在任意空行输入/会弹出命令面板slash-commands.tsx按类别组织Basic标题、列表、任务清单、代码块、引用、分割线、3×3 表格Media图片、视频、嵌入、任意文件附件——均支持本地上传或粘贴 URLAdvanced信息 Callout、警告 Callout、LaTeX 公式、Emoji 选择器、LaTeX 文件嵌入输入关键词可即时过滤方向键 回车即可插入是新手最快的写作加速器。五、架构速览这套编辑器由哪些扩展组成如果你好奇「为什么表格能拖拽调宽、图片能拉伸、公式能渲染」答案集中在 extensions.ts 的扩展注册表里扩展提供的能力StarterKit段落、标题、列表、代码块等基础块MermaidCodeBlock lowlight代码高亮仅内置 13 种常用语言控制体积与 Mermaid 图表渲染ResizableImage可拖拽缩放的图片resizable-image.tsxTable 系列可调整列宽的表格TaskList/TaskItem嵌套任务清单Callout / DragHandle / WikiLink / MathCallout 块、块拖拽手柄、#页面双向链接、LaTeX 公式FindExtension页内查找⌘FAutoDirection段落级 RTL 自动方向此外bubble-menu.tsx 提供选中文字后的浮动工具条version-history.tsx 支持文件版本历史对比配合 ⌘S 自动保存构成完整写作闭环。六、小结为什么这套双模设计值得学Cabinet 的 Tiptap 编辑器证明了「富文本体验 Markdown 资产」可以兼得用户享受 WYSIWYG 的低门槛仓库里留下的却是可 diff、可迁移的纯文本源码模式则随时兜底。对于想给自己的知识库项目选编辑器的同学建议直接精读 src/components/editor/ 目录——从 editor.tsx 的双模状态管理到 editor-toolbar.tsx 的焦点保持技巧都是可直接复用的最佳实践。【免费下载链接】cabinetAI-first knowledge base and startup OS项目地址: https://gitcode.com/gh_mirrors/cabinet3/cabinet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 WYSIWYG+Markdown双模编辑：Cabinet Tiptap编辑器的完整使用指南
WYSIWYGMarkdown双模编辑Cabinet Tiptap编辑器的完整使用指南【免费下载链接】cabinetAI-first knowledge base and startup OS项目地址: https://gitcode.com/gh_mirrors/cabinet3/cabinetCabinet 是一款 AI 优先的本地知识库Knowledge Base它的核心写作体验由基于 TiptapProseMirror构建的双模编辑器提供你可以在所见即所得WYSIWYG富文本视图和原始 Markdown 源码视图之间一键切换而内容始终以 Markdown 格式落盘方便版本管理与迁移。一、双模编辑器是怎么工作的打开任意页面你会进入由 editor.tsx 实现的KBEditor组件。它的设计可以概括为三句话存储层是 Markdown每次编辑时编辑器把富文本 DOM 转回 Markdownto-markdown.ts页面就是一个普通的.md文件编辑层是 Tiptap加载页面时Markdown 先被渲染成 HTMLto-html.ts交给 ProseMirror 编辑获得流畅的打字体验双模式随时切换工具栏右侧的Markdown / Preview按钮editor-toolbar.tsx让你在富文本视图和原始源码textarea之间自由切换改动实时同步。对新手来说这意味着想排版就点按钮想精确控制语法就切源码模式两者永不冲突。二、快速上手5 个最高频技巧快捷键 / 操作作用/打开斜杠命令菜单标题、表格、图片、Callout、公式……⌘S/CtrlS保存页面状态栏会显示 Saving…/Saved⌘F/CtrlF页内查找⌘E/CtrlE给选中文本添加/编辑链接直接粘贴视频 URL自动识别并嵌入 YouTube、Vimeo、Loom 等媒体这组快捷键在编辑器底部状态栏有常驻提示editor.tsx。粘贴即嵌入是体验亮点把图片文件直接拖进页面会自动上传并插入粘贴一个纯 URL 时编辑器会智能判断它是普通链接还是可嵌入媒体甚至弹出「链接 vs 嵌入」的内联小菜单让你选择editor.tsx。三、工具栏功能清单从排版到 RTL工具栏采用单行可横向滚动的布局覆盖约 35 个常用命令分为主区和扩展区两组主区始终可见标题 H1–H3、加粗、斜体、下划线、删除线、行内代码链接、文字颜色、荧光笔高亮无序/有序列表、引用块、任务清单Checklist、代码块、分割线扩展区四种对齐方式、上下标插入图片、视频、第三方嵌入YouTube、X、Spotify 等撤销/重做、RTL 方向切换支持阿拉伯语、希伯来语等从右到左书写每个按钮都会随光标位置实时点亮当前生效的格式状态工具条支持左右箭头和滚轮水平滚动editor-toolbar.tsx。四、斜杠命令菜单不碰工具栏也能写完整篇文档在任意空行输入/会弹出命令面板slash-commands.tsx按类别组织Basic标题、列表、任务清单、代码块、引用、分割线、3×3 表格Media图片、视频、嵌入、任意文件附件——均支持本地上传或粘贴 URLAdvanced信息 Callout、警告 Callout、LaTeX 公式、Emoji 选择器、LaTeX 文件嵌入输入关键词可即时过滤方向键 回车即可插入是新手最快的写作加速器。五、架构速览这套编辑器由哪些扩展组成如果你好奇「为什么表格能拖拽调宽、图片能拉伸、公式能渲染」答案集中在 extensions.ts 的扩展注册表里扩展提供的能力StarterKit段落、标题、列表、代码块等基础块MermaidCodeBlock lowlight代码高亮仅内置 13 种常用语言控制体积与 Mermaid 图表渲染ResizableImage可拖拽缩放的图片resizable-image.tsxTable 系列可调整列宽的表格TaskList/TaskItem嵌套任务清单Callout / DragHandle / WikiLink / MathCallout 块、块拖拽手柄、#页面双向链接、LaTeX 公式FindExtension页内查找⌘FAutoDirection段落级 RTL 自动方向此外bubble-menu.tsx 提供选中文字后的浮动工具条version-history.tsx 支持文件版本历史对比配合 ⌘S 自动保存构成完整写作闭环。六、小结为什么这套双模设计值得学Cabinet 的 Tiptap 编辑器证明了「富文本体验 Markdown 资产」可以兼得用户享受 WYSIWYG 的低门槛仓库里留下的却是可 diff、可迁移的纯文本源码模式则随时兜底。对于想给自己的知识库项目选编辑器的同学建议直接精读 src/components/editor/ 目录——从 editor.tsx 的双模状态管理到 editor-toolbar.tsx 的焦点保持技巧都是可直接复用的最佳实践。【免费下载链接】cabinetAI-first knowledge base and startup OS项目地址: https://gitcode.com/gh_mirrors/cabinet3/cabinet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考