feat: modify document demo

Author: wuyiping0628

packages/docs/fluent-editor/docs/demo/counter.md

@@ -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
 

packages/docs/fluent-editor/docs/demo/custom-toolbar.md

@@ -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" />

packages/docs/fluent-editor/docs/demo/file-upload.md

@@ -4,8 +4,7 @@
 
 默认会处理视频与图片格式，其他格式统一被处理为文件显示
 
-:::demo src=demos/file-upload.vue
-:::
+<demo vue="../../demos/file-upload.vue" />
 
 ## 服务器端上传
 
@@ -17,8 +16,7 @@
 
 所以，如果上传四张图片，最终的结果应该是： edge 浏览器图标、chrome 浏览器图标、edge 浏览器图标、chrome 浏览器图标
 
-:::demo src=demos/file-upload-handle.vue
-:::
+<demo vue="../../demos/file-upload-handle.vue" />
 
 ## Options
 

packages/docs/fluent-editor/docs/demo/format-painter.md

@@ -4,5 +4,4 @@
 
 选择一段文本后，单击格式刷按钮，再次选择另外一段文本可实现格式复制。双击后可多次粘贴格式，再次点击按钮退出。
 
-:::demo src=demos/format-painter.vue
-:::
+<demo vue="../../demos/format-painter.vue" />

packages/docs/fluent-editor/docs/demo/formula.md

@@ -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"/>
 
 ## 可编辑公式
 
@@ -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"/>

packages/docs/fluent-editor/docs/demo/get-content.md

@@ -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" />

packages/docs/fluent-editor/docs/demo/header-list.md

@@ -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" />
 
 ## 参数选项
 

packages/docs/fluent-editor/docs/demo/i18n.md

@@ -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" />
 
 ## 自定义文本
 
@@ -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" />

packages/docs/fluent-editor/docs/demo/image-tool.md

@@ -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" />
 
 ## 配置