docs: optimize demos (#5)

opentiny · Aug 14, 2024 · 694e152 · 694e152
1 parent 62c8f1a
commit 694e152
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 0 deletions.
diff --git a/packages/docs/fluent-editor/.vitepress/theme/vars.css b/packages/docs/fluent-editor/.vitepress/theme/vars.css
@@ -14,3 +14,8 @@
     max-height: 260px;
   }
 }
+
+/* 隐藏 Playground 和全屏按钮 */
+._example-tooltip_18ews_2:nth-child(1) svg {
+  display: none;
+}
diff --git a/packages/docs/fluent-editor/docs/basic-usage.md b/packages/docs/fluent-editor/docs/basic-usage.md
@@ -1,4 +1,17 @@
 # 基本用法
 
+通过 `new FluentEditor(selector, options)` 初始化编辑器实例，selector 是编辑器挂载的 DOM 节点，options 是配置项，最基本的用法就是配置 snow 主题。
+
+默认工具栏配置是：
+
+```javascript
+[
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean']
+]
+```
+
 :::demo src=demos/basic-usage.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/code-block-highlight.md b/packages/docs/fluent-editor/docs/code-block-highlight.md
@@ -1,4 +1,6 @@
 # 代码块高亮
 
+通过设置 `syntax` 模块为 true，可以开启代码块高亮功能。
+
 :::demo src=demos/code-block-highlight.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/custom-toolbar.md b/packages/docs/fluent-editor/docs/custom-toolbar.md
@@ -1,4 +1,16 @@
 # 自定义工具栏
 
+通过配置 `toolbar` 模块的 `container` 属性，可以自定义工具栏。
+
+除了支持 Quill 内置的 22 种工具栏之外，还支持以下工具栏：
+
+- `undo` 撤销
+- `redo` 重做
+- `file` 文件上传，需要启用 `file` 模块
+- `emoji` 插入表情，需要启用 `emoji-toolbar` 模块
+- `better-table` 表格，需要启用 `better-table` 模块
+
+Quill 支持的工具栏: [https://quilljs.com/docs/modules/toolbar](https://quilljs.com/docs/modules/toolbar)
+
 :::demo src=demos/custom-toolbar.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/emoji.md b/packages/docs/fluent-editor/docs/emoji.md
@@ -1,4 +1,6 @@
 # 表情
 
+通过配置 `emoji-toolbar` 为 true，可以开启插入表情功能，同时需要配置工具栏按钮 `emoji`。
+
 :::demo src=demos/emoji.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/file-upload.md b/packages/docs/fluent-editor/docs/file-upload.md
@@ -1,4 +1,6 @@
 # 文件上传
 
+通过配置 `file` 为 true，可以开启插入表情功能，同时需要配置工具栏按钮 `file`。
+
 :::demo src=demos/file-upload.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/image-upload.md b/packages/docs/fluent-editor/docs/image-upload.md
@@ -1,4 +1,6 @@
 # 图片上传
 
+通过配置工具栏按钮 `image`，可以开启图片上传功能，图片支持等比放大/缩小。
+
 :::demo src=demos/image-upload.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/mention.md b/packages/docs/fluent-editor/docs/mention.md
@@ -1,4 +1,16 @@
 # @提醒
 
+通过配置 `mention` 模块，可以开启@提醒功能。
+
+`mention` 模块配置项：
+
+```typescript
+interface IMentionOptions {
+  itemKey: string,
+  searchKey: string,
+  search: (term: string) => object[]
+}
+```
+
 :::demo src=demos/mention.vue
 :::
diff --git a/packages/docs/fluent-editor/docs/table.md b/packages/docs/fluent-editor/docs/table.md
@@ -1,4 +1,60 @@
 # 表格
 
+通过配置 `better-table` 模块，可以开启表格功能，同时需要配置工具栏按钮 `better-table`。
+
 :::demo src=demos/table.vue
 :::
+
+`better-table` 模块配置项：
+
+```typescript
+interface IBetterTableOptions {
+  operationMenu: {
+    items: {
+      copyCells: boolean | {
+        text: string
+      },
+      copyTable: boolean | {
+        text: string
+      },
+      cutCells: boolean | {
+        text: string
+      },
+      emptyCells: boolean | {
+        text: string
+      },
+      insertRowUp: boolean | {
+        text: string
+      },
+      insertRowDown: boolean | {
+        text: string
+      },
+      insertColumnLeft: boolean | {
+        text: string
+      },
+      insertColumnRight: boolean | {
+        text: string
+      },
+      mergeCells: boolean | {
+        text: string
+      },
+      unmergeCells: boolean | {
+        text: string
+      },
+      deleteRow: boolean | {
+        text: string
+      },
+      deleteColumn: boolean | {
+        text: string
+      },
+      deleteTable: boolean | {
+        text: string
+      }
+    }
+    color: boolean | {
+      text: string,
+      colors: string[]
+    }
+  }
+}
+```