docs(fluent-editor): add demos (#4)

.gitignore

@@ -4,6 +4,7 @@ dist/
 coverage/
 test-results
 cache
+.temp
 
 # local env
 .env.local

packages/docs/fluent-editor/.vitepress/sidebar.ts

@@ -4,7 +4,14 @@ export function sidebar() {
     {
       text: '使用示例',
       items: [
-        { text: '基本用法', link: '/docs/basic-usage' }
+        { text: '基本用法', link: '/docs/basic-usage' },
+        { text: '自定义工具栏', link: '/docs/custom-toolbar' },
+        { text: '图片上传', link: '/docs/image-upload' },
+        { text: '文件上传', link: '/docs/file-upload' },
+        { text: '代码块高亮', link: '/docs/code-block-highlight' },
+        { text: '表格', link: '/docs/table' },
+        { text: '@提醒', link: '/docs/mention' },
+        { text: '插入表情', link: '/docs/emoji' },
       ]
     }
   ]

packages/docs/fluent-editor/demos/basic-usage.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
 
 let editor
 
 onMounted(() => {
   // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
   import('@opentiny/fluent-editor').then((module) => {
     const FluentEditor = module.default
+
     editor = new FluentEditor('#editor', {
       theme: 'snow'
     })

packages/docs/fluent-editor/demos/code-block-highlight.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['code-block']
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        },
+        syntax: true
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/demos/custom-toolbar.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  ['undo', 'redo', 'clean'],
+  [{ header: [1, 2, 3, 4, 5, 6, false] }, { size: ['12px', '14px', '16px', '18px', '20px', '24px', '32px', '36px', '48px', '72px']}],
+  ['bold', 'italic', 'strike', 'underline'],
+  [{ color: [] }, { background: [] }],
+  [{ align: [] }, { list: 'ordered' }, { list: 'bullet' }, { list: 'check' }],
+  ['link', 'blockquote', 'code', 'code-block'],
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        }
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/demos/emoji.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['emoji']
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        },
+        'emoji-toolbar': true
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/demos/file-upload.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['file']
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        },
+        file: true
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/demos/image-upload.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['image']
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        }
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/demos/mention.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+// @提醒
+const searchKey = 'name'
+const mentionList = [
+  {
+    name: 'Jack',
+    age: 26,
+    cn: 'Jack 杰克'
+  },
+  {
+    name: 'Lucy',
+    age: 22,
+    cn: 'Lucy 露西'
+  }
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        mention: {
+          itemKey: 'cn',
+          searchKey,
+          search: function(term) {
+            return mentionList.filter(item => {
+              return item[searchKey] && String(item[searchKey]).includes(term)
+            })
+          }
+        }
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/demos/table.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import FluentEditor from '@opentiny/fluent-editor'
+
+let editor
+
+const TOOLBAR_CONFIG = [
+  [{ header: [] }],
+  ['bold', 'italic', 'underline', 'link'],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  ['clean'],
+  ['better-table']
+]
+
+onMounted(() => {
+  // ssr compat, reference: https://vitepress.dev/guide/ssr-compat#importing-in-mounted-hook
+  import('@opentiny/fluent-editor').then((module) => {
+    const FluentEditor = module.default
+
+    editor = new FluentEditor('#editor', {
+      theme: 'snow',
+      modules: {
+        toolbar: {
+          container: TOOLBAR_CONFIG
+        },
+        'better-table': {
+          operationMenu: {
+            color: {
+              text: '主题色',
+              colors: [
+                '#ffffff', '#f2f2f2', '#dddddd', '#a6a6a6', '#666666', '#000000',
+                '#c00000', '#ff0000', '#ffc8d3', '#ffc000', '#ffff00', '#fff4cb',
+                '#92d050', '#00b050', '#dff3d2', '#00b0f0', '#0070c0', '#d4f1f5',
+                '#002060', '#7030a0', '#7b69ee', '#1476ff', '#ec66ab', '#42b883',
+              ]
+            }
+          }
+        }
+      }
+    })
+  })
+})
+</script>
+
+<template>
+  <div id="editor"></div>
+</template>

packages/docs/fluent-editor/docs/code-block-highlight.md

@@ -0,0 +1,4 @@
+# 代码块高亮
+
+:::demo src=demos/code-block-highlight.vue
+:::

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

@@ -0,0 +1,4 @@
+# 自定义工具栏
+
+:::demo src=demos/custom-toolbar.vue
+:::

packages/docs/fluent-editor/docs/emoji.md

@@ -0,0 +1,4 @@
+# 表情
+
+:::demo src=demos/emoji.vue
+:::

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

@@ -0,0 +1,4 @@
+# 文件上传
+
+:::demo src=demos/file-upload.vue
+:::

packages/docs/fluent-editor/docs/image-upload.md

@@ -0,0 +1,4 @@
+# 图片上传
+
+:::demo src=demos/image-upload.vue
+:::

packages/docs/fluent-editor/docs/mention.md

@@ -0,0 +1,4 @@
+# @提醒
+
+:::demo src=demos/mention.vue
+:::

packages/docs/fluent-editor/docs/table.md

@@ -0,0 +1,4 @@
+# 表格
+
+:::demo src=demos/table.vue
+:::

packages/fluent-editor/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@opentiny/fluent-editor",
   "version": "3.17.1",
-  "description": "A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It is powerful and out-of-the-box.",
-  "homepage": "",
+  "description": "A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.",
+  "homepage": "https://opentiny.github.io/fluent-editor/",
   "keywords": [
     "editor",
     "rich-text-editor",