Skip to content

feat: add vitepress-demo-plugin and modify document demo #455

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 4 commits into from
Mar 6, 2026
Merged

feat: add vitepress-demo-plugin and modify document demo #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
71526d8
feat: add vitepress-demo-plugin
wuyiping0628 Mar 5, 2026
e5795e5
feat: modify document demo
wuyiping0628 Mar 5, 2026
68178c1
feat: modify document demo
wuyiping0628 Mar 5, 2026
4c2f3a4
feat: adapt to environmental variables
wuyiping0628 Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/docs/fluent-editor/.vitepress/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
import packageJson from '@opentiny/fluent-editor/package.json' with { type: 'json'}
import { demoPreviewPlugin } from '@vitepress-code-preview/plugin'
import { defineConfig, loadEnv } from 'vitepress'
import { vitepressDemoPlugin } from 'vitepress-demo-plugin'
import llmstxt from 'vitepress-plugin-llms'
import { sidebar } from './sidebar'

Expand Down Expand Up @@ -100,6 +101,12 @@ export default defineConfig({
return `${content}</div>`
}
})
md.use(vitepressDemoPlugin, {
playground: { show: true },
codeTransformer: (code) => {
return code.replace(/import\.meta\.env\.BASE_URL/g, `'${env.VITE_BASE_URL || '/tiny-editor/'}'`)
},
})
},
},
vite: {
Expand Down
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/add-toolbar-item.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@

本示例增加点赞、点踩两个工具栏图标，点赞可以给文本设置绿色，点踩可以给文本设置红色。

:::demo src=demos/add-toolbar-item.vue
:::
<demo vue="../../demos/add-toolbar-item.vue" />
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/ai.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
该功能依赖于大模型的 API Key，无法在官网的 Demo 中进行体验。如果你想体验该功能，可以本地启动 TinyEditor 项目，并使用 Ollama 启动本地大模型；或者配置线上大模型的 host 和 apiKey。
:::

:::demo src=demos/ai.vue
:::
<demo vue="../../demos/ai.vue" />

## API

Expand Down
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/basic-usage.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,4 @@
]
```

:::demo src=demos/basic-usage.vue
:::
<demo vue="../../demos/basic-usage.vue" />
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/code-block-highlight.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,4 @@

使用代码块高亮需要安装 [`highlight.js`](https://highlightjs.org/) 插件，并将导入的 highlight.js 传递给 `syntax` 模块的 `hljs` 选项。

:::demo src=demos/code-block-highlight.vue
:::
<demo vue="../../demos/code-block-highlight.vue" />
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/collaborative-editing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@

下面是一个完整的协同编辑演示：

:::demo src=demos/collaborative-editing.vue
:::
<demo vue="../../demos/collaborative-editing.vue" />

## 快速开始

Expand Down
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/counter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,13 @@

通过配置 `counter` 为 true，可以开启字符统计功能。

:::demo src=demos/counter.vue
:::
<demo vue="../../demos/counter.vue" />

## 最大字符数

默认最大字符数为 500，通过配置 `count` 属性，可以自定义最大字符数。

:::demo src=demos/counter-count.vue
:::
<demo vue="../../demos/counter-count.vue" />

## API

Expand Down
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/custom-toolbar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,4 @@

Quill 支持的工具栏: [https://quilljs.com/docs/modules/toolbar](https://quilljs.com/docs/modules/toolbar)

:::demo src=demos/custom-toolbar.vue
:::
<demo vue="../../demos/custom-toolbar.vue" />
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/emoji.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ npm i @floating-ui/dom @emoji-mart/data emoji-mart

> `emojiData`、`EmojiPicker`、`emojiPickerPosition` 支持通过 window 传入
:::demo src=demos/emoji.vue
:::
<demo vue="../../demos/emoji.vue" />

## Options

Expand Down
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/file-upload.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@

默认会处理视频与图片格式，其他格式统一被处理为文件显示

:::demo src=demos/file-upload.vue
:::
<demo vue="../../demos/file-upload.vue" />

## 服务器端上传

Expand All @@ -17,8 +16,7 @@

所以，如果上传四张图片，最终的结果应该是： edge 浏览器图标、chrome 浏览器图标、edge 浏览器图标、chrome 浏览器图标

:::demo src=demos/file-upload-handle.vue
:::
<demo vue="../../demos/file-upload-handle.vue" />

## Options

Expand Down
12 changes: 4 additions & 8 deletions packages/docs/fluent-editor/docs/demo/flow-chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,25 @@ npm install @logicflow/core @logicflow/extension

通过配置工具栏按钮 `flow-chart`，并启用 `flow-chart`模块: `'flow-chart': true` 可以开启流程图功能。

:::demo src=demos/flow-chart.vue
:::
<demo vue="../../demos/flow-chart.vue" />

## 网格样式

流程图模块支持配置网格样式，可以配置网格大小、颜色、类型等设置。

:::demo src=demos/flow-chart-grid.vue
:::
<demo vue="../../demos/flow-chart-grid.vue" />

## 背景样式

流程图模块支持配置背景样式，可以配置背景颜色、图片等设置。

:::demo src=demos/flow-chart-background.vue
:::
<demo vue="../../demos/flow-chart-background.vue" />

## 调整大小

流程图模块支持调整流程图的大小，拖动调整手柄可以改变流程图的尺寸。

:::demo src=demos/flow-chart-resize.vue
:::
<demo vue="../../demos/flow-chart-resize.vue" />

## 配置

Expand Down
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/format-painter.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@

选择一段文本后，单击格式刷按钮，再次选择另外一段文本可实现格式复制。双击后可多次粘贴格式，再次点击按钮退出。

:::demo src=demos/format-painter.vue
:::
<demo vue="../../demos/format-painter.vue" />
9 changes: 3 additions & 6 deletions packages/docs/fluent-editor/docs/demo/formula.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,15 @@

测试公式内容：e=mc^2

:::demo src=demos/formula.vue
:::
<demo vue="../../demos/formula.vue" />

## 化学公式

`KaTex` 包导出了 `mhchem`. 又因为 Quill 的公式基于 `KaTex` 所以可以直接在顶部导入 `katex/contrib/mhchem/mhchem` 即可启用化学功能.

测试公式: `\ce{x Na(NH4)HPO4 ->[\Delta] (NaPO3)_x + x NH3 ^ + x H2O}`

:::demo src=demos/formula-chemistry.vue
:::
<demo vue="../../demos/formula-chemistry.vue"/>

## 可编辑公式

Expand Down Expand Up @@ -50,5 +48,4 @@ import 'mathlive/fonts.css'
`0.104.0` 及以上版本的 `mathlive` 存在公式编辑面板闪退问题，请使用 `0.103.0` 及以下版本。
:::

:::demo src=demos/formula-mathlive.vue
:::
<demo vue="../../demos/formula-mathlive.vue"/>
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/get-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,10 @@

测试视频链接：[https://media.w3.org/2010/05/sintel/trailer.mp4](https://media.w3.org/2010/05/sintel/trailer.mp4)

:::demo src=demos/get-content-html.vue
:::
<demo vue="../../demos/get-content-html.vue" />

## 获取 Delta 内容

通过调用 `editor.getContents()` 方法获取编辑器的 Delta 内容。

:::demo src=demos/get-content-delta.vue
:::
<demo vue="../../demos/get-content-delta.vue" />
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/header-list.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,15 @@ npm install quill-header-list

创建一个元素用于存放标题列表，并将其传入`header-list`的`container`属性。

:::demo src=demos/header-list.vue
:::
<demo vue="../../demos/header-list.vue" />

## 设置滚动容器

默认情况下，编辑器会指定自身为滚动容器，可通过传递`scrollContainer`属性来指定滚动容器。

当页面中存在`fixed`元素处于顶部时，你可能会需要进行额外的滚动 offset(比如此文档页面)，否则会导致滚动后的标题被`fixed`元素遮挡。可以设置`topOffset`额外滚动距离。

:::demo src=demos/header-list-container.vue
:::
<demo vue="../../demos/header-list-container.vue" />

## 参数选项

Expand Down
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/i18n.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ Welcome to commit PR for more language support.

可通过函数 `changeLanguage({ lang, langText })` 修改当前语言

:::demo src=demos/i18n.vue
:::
<demo vue="../../demos/i18n.vue" />

## 自定义文本

Expand All @@ -19,5 +18,4 @@ Welcome to commit PR for more language support.

针对直接使用文本作为显示的模块选项，可以使用模板`_i18n"key"`，内部会自动根据当前编辑器语言替换 key 对应的文本

:::demo src=demos/i18n-custom.vue
:::
<demo vue="../../demos/i18n-custom.vue" />
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/image-tool.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,13 @@

点击图片可显示图片相关工具

:::demo src=demos/image-toolbar.vue
:::
<demo vue="../../demos/image-toolbar.vue" />

## 工具栏按钮配置

可通过配置项 `modules.image.toolbar.buttons` 对工具栏按钮进行配置。默认存在 `align-left`、`align-center`、`align-right`、`copy`、`download` 五个按钮，可以自行增加按钮或者通过设置 `false` 关闭某个按钮。

:::demo src=demos/image-toolbar-button.vue
:::
<demo vue="../../demos/image-toolbar-button.vue" />

## 配置

Expand Down
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/markdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@

比如：输入 `#`，再按空格键，即可插入一级标题格式；输入 `-`，再按空格键，即可插入无序列表格式；输入 `>`，再按空格键，即可插入引用格式。

:::demo src=demos/markdown.vue
:::
<demo vue="../../demos/markdown.vue" />
10 changes: 3 additions & 7 deletions packages/docs/fluent-editor/docs/demo/mention.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,20 @@

通过配置 `mention` 模块，可以开启@提醒功能。

:::demo src=demos/mention.vue
:::

<demo vue="../../demos/mention.vue" />
## 自定义列表样式

通过配置 `renderMentionItem` 方法，可以自定义选项列表的样式。

:::demo src=demos/mention-custom-list.vue
:::
<demo vue="../../demos/mention-custom-list.vue" />

## 跳转链接

在数据中配置`link`与`target`属性，可设置提醒跳转的链接，对应`a`标签的`href`与`target`属性。

当编辑器处于可编辑状态时，链接跳转不可以，注意切换为只读状态。

:::demo src=demos/mention-link.vue
:::
<demo vue="../../demos/mention-link.vue" />

## API

Expand Down
15 changes: 5 additions & 10 deletions packages/docs/fluent-editor/docs/demo/mind-map.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,31 @@ npm install simple-mind-map simple-mind-map-plugin-themes

通过配置工具栏按钮 `mind-map`，并启用 `mind-map`模块: `'mind-map': true` 可以开启思维导图功能。

:::demo src=demos/mind-map.vue
:::
<demo vue="../../demos/mind-map.vue" />

## 背景样式

思维导图模块支持配置背景样式，可以配置背景颜色、图片等设置。

:::demo src=demos/mind-map-background.vue
:::
<demo vue="../../demos/mind-map-background.vue" />

## 调整大小

思维导图模块支持调整思维导图的大小，拖动调整手柄可以改变思维导图的尺寸。

:::demo src=demos/mind-map-resize.vue
:::
<demo vue="../../demos/mind-map-resize.vue" />

## 连线样式

思维导图模块支持配置连线样式，可以配置连线颜色、样式等设置。其中曲线只在logicalStructure逻辑结构图和mindMap思维导图两种结构时生效。

:::demo src=demos/mind-map-line.vue
:::
<demo vue="../../demos/mind-map-line.vue" />

## 主题样式

思维导图模块支持配置主题样式，传入主题名称即可。需要注意的是设置了主题后改变的是节点，连线，背景等相关样式，所以设置了主题和背景样式和连线样式后，背景样式和连线样式会覆盖与其相关的主题样式。

:::demo src=demos/mind-map-theme.vue
:::
<demo vue="../../demos/mind-map-theme.vue" />

## 配置

Expand Down
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/readonly.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,4 @@

通过配置 `modules.toolbar` 为 false 可以隐藏工具栏，配置 `readOnly` 为 true 可以设置只读模式。

:::demo src=demos/readonly.vue
:::
<demo vue="../../demos/readonly.vue" />
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/screenshot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,15 @@ import Html2Canvas from 'html2canvas'
window.Html2Canvas = Html2Canvas
```

:::demo src=demos/screenshot.vue
:::
<demo vue="../../demos/screenshot.vue" />

## 上传截图

除了将 `Html2Canvas` 变量暴露在 `window` 上，还可以将 Html2Canvas 变量传入 screenshot 配置项中。

默认截图的格式是 Base64，你可以在 `screenshot.beforeCreateImage` 中处理截屏图片，将图片上传到服务器，再将服务器返回的图片 URL 显示到编辑器中。

:::demo src=demos/screenshot-upload-to-server.vue
:::
<demo vue="../../demos/screenshot-upload-to-server.vue" />

## API

Expand Down
6 changes: 2 additions & 4 deletions packages/docs/fluent-editor/docs/demo/set-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@

通过设置 `editor.root.innerHTML`，可以初始化 HTML 内容。

:::demo src=demos/set-content-html.vue
:::
<demo vue="../../demos/set-content-html.vue" />

## 初始化 Delta 内容

配置调用 `editor.setContents()` 方法，可以初始化 Delta 内容。

:::demo src=demos/set-content-delta.vue
:::
<demo vue="../../demos/set-content-delta.vue" />
3 changes: 1 addition & 2 deletions packages/docs/fluent-editor/docs/demo/shortcut-key.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,4 @@

快捷菜单功能默认关闭，可通过配置 `shortcut-key` 模块为 true 进行开启，开启后，placeholder 会显示“输入 / 唤起菜单”，当我们在空行输入 `/` 时就会唤起快捷菜单，可以通过方向键进行菜单选择，按 Enter 确定，实现纯键盘操作，提升操作效率。

:::demo src=demos/shortcut-key.vue
:::
<demo vue="../../demos/shortcut-key.vue" />
Loading