docs(fluent-editor): optimize fluent-editor mobile-first docs (#1804)

examples/sites/demos/apis/fluent-editor.js

@@ -38,6 +38,18 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'disabled'
         },
+        {
+          name: 'image-upload',
+          typeAnchorName: 'IImageUploadOptions',
+          type: 'IImageUploadOptions',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '图片上传模块配置项',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'image-upload'
+        },
         {
           name: 'modelValue / v-model',
           type: 'string',
@@ -48,11 +60,51 @@ export default {
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage'
+        },
+        {
+          name: 'options',
+          type: 'object',
+          defaultValue: "",
+          desc: {
+            'zh-CN': '编辑器配置项，参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'options'
+        },
+        {
+          name: 'zIndex',
+          type: 'number',
+          defaultValue: "",
+          desc: {
+            'zh-CN': '编辑器的 z-index',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'basic-usage'
         }
       ],
       events: [],
       methods: [],
       slots: []
     }
+  ],
+  types: [
+    {
+      name: 'IImageUploadOptions',
+      type: 'interface',
+      code: `
+interface IImageUploadOptions {
+  url: string, // 图片上传地址
+  method: string, // 上传方法
+  name: string, // 图片名称
+  withCredentials: boolean, // 是否需要认证，开启后会在请求里带上 cookie 信息
+  headers: object, // 上传请求头部信息
+  csrf: string, // 请求 csrf 携带信息
+  success: (serverResponse: { file: { downloadUrl: string } }[], next: (imageUrl: string) => void) => void, // 上传成功回调信息
+  fail: (serverError: string) => void // 上传失败回调信息
+}
+      `
+    },
   ]
 }

examples/sites/demos/mobile-first/app/fluent-editor/basic-usage.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-fluent-editor v-model="content" :zIndex="2"></tiny-fluent-editor>
+    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
     内容：<br />
     {{ content }}
   </div>

examples/sites/demos/mobile-first/app/fluent-editor/data-switch.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
+    内容：<br />
+    {{ value }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      value: '<p>Hello <strong>FluentEditor</strong>!</p>'
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/fluent-editor/disabled.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/fluent-editor/image-upload.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import { Modal } from '@opentiny/vue'
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}',
+      imageUpload: {
+        url: 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be',
+        method: 'POST',
+        name: 'image',
+        withCredentials: true,
+        headers: {},
+        success: (serverResponse, next) => {
+          let file = {}
+
+          for (const key in serverResponse) {
+            file = serverResponse[key]
+            break
+          }
+
+          next(file.downloadUrl)
+        },
+        fail: (serverError) => {
+          Modal.message({
+            message: `上传失败回调事件：${serverError}`,
+            status: 'info'
+          })
+        }
+      }
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/fluent-editor/options.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import TinyFluentEditor from '@opentiny/vue-fluent-editor'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '',
+      options: {
+        placeholder: '请输入内容'
+      }
+    }
+  }
+}
+</script>

examples/sites/demos/mobile-first/app/fluent-editor/webdoc/fluent-editor.js

@@ -13,6 +13,56 @@ export default {
         'en-US': 'You can refer to component label.'
       },
       codeFiles: ['basic-usage.vue']
-    }
+    },
+    {
+      demoId: 'data-switch',
+      name: {
+        'zh-CN': '数据格式转换',
+        'en-US': 'Vertical divider line'
+      },
+      desc: {
+        'zh-CN':
+          '<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
+        'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
+      },
+      codeFiles: ['data-switch.vue']
+    },
+    {
+      demoId: 'disabled',
+      name: {
+        'zh-CN': '禁用态',
+        'en-US': 'The position of the separator copy'
+      },
+      desc: {
+        'zh-CN': '<p>通过属性 <code>disabled</code> 可设置编辑器为不可编辑状态。</p>',
+        'en-US':
+          '<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
+      },
+      codeFiles: ['disabled.vue']
+    },
+    {
+      demoId: 'image-upload',
+      name: {
+        'zh-CN': '图片上传',
+        'en-US': 'Image Upload'
+      },
+      desc: {
+        'zh-CN': '通过 <code>image-upload</code> 设置图片上传模块的配置项。',
+        'en-US': ''
+      },
+      codeFiles: ['image-upload.vue']
+    },
+    {
+      demoId: 'options',
+      name: {
+        'zh-CN': '编辑器配置',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '通过 <code>options</code> 设置编辑器的配置项，支持的配置项和 Quill 的相同，可参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档。',
+        'en-US': ''
+      },
+      codeFiles: ['options.vue']
+    },
   ]
 }

packages/renderless/src/fluent-editor/options.ts

@@ -43,7 +43,7 @@ const toolbar = (FluentEditor) => {
       [{ direction: 'rtl' }],
       [{ color: [] }, { background: [] }],
       [{ align: [] }],
-      ['link', 'image', 'video', 'file'],
+      ['link', 'image'],
       ['better-table'],
       ['fullscreen']
     ]

packages/theme/src/fluent-editor/index.less

@@ -72,6 +72,8 @@
       }
 
       span.ql-lineheight {
+        margin-right: 24px !important;
+
         > span {
           width: 60px;
         }
@@ -106,6 +108,10 @@
               background-color: rgba(25, 25, 25, 0.1);
               color: #191919;
             }
+
+            &::after {
+              display: none;
+            }
           }
         }
 

packages/vue/src/fluent-editor/src/mobile-first.vue

@@ -83,6 +83,7 @@ export default defineComponent({
     IconCloudUpload: IconCloudUpload(),
     IconFullscreen: IconFullscreen()
   },
+  emits: ['ready', 'blur', 'focus', 'update:modelValue', 'change'],
   props: [
     ...props,
     '_constants',