feat(@vben/plugins): add tiptap rich text editor

playground/src/adapter/component/index.ts

@@ -40,6 +40,7 @@ import {
 import { useSortable } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';
 import { $t } from '@vben/locales';
+import { VbenTiptap } from '@vben/plugins/tiptap';
 import { isEmpty } from '@vben/utils';
 
 import { message, Modal, notification } from 'ant-design-vue';
@@ -583,6 +584,7 @@ export type ComponentType =
   | 'RadioGroup'
   | 'RangePicker'
   | 'Rate'
+  | 'RichEditor'
   | 'Select'
   | 'Space'
   | 'Switch'
@@ -646,6 +648,7 @@ async function initComponentAdapter() {
     RadioGroup,
     RangePicker,
     Rate,
+    RichEditor: withDefaultPlaceholder(VbenTiptap, 'input'),
     Select: withDefaultPlaceholder(Select, 'select'),
     Space,
     Switch,

playground/src/locales/langs/en-US/examples.json

@@ -79,5 +79,8 @@
   },
   "cropper": {
     "title": "Cropper"
+  },
+  "tiptap": {
+    "title": "Rich Text Editor"
   }
 }

playground/src/locales/langs/zh-CN/examples.json

@@ -79,5 +79,8 @@
   },
   "cropper": {
     "title": "图片裁剪"
+  },
+  "tiptap": {
+    "title": "富文本编辑器"
   }
 }

playground/src/router/routes/modules/examples.ts

@@ -346,6 +346,15 @@ const routes: RouteRecordRaw[] = [
           title: $t('examples.cropper.title'),
         },
       },
+      {
+        name: 'TiptapExample',
+        path: '/examples/tiptap',
+        component: () => import('#/views/examples/tiptap/index.vue'),
+        meta: {
+          icon: 'lucide:square-pen',
+          title: $t('examples.tiptap.title'),
+        },
+      },
     ],
   },
 ];

playground/src/views/examples/form/basic.vue

@@ -409,6 +409,12 @@ const [BaseForm, baseFormApi] = useVbenForm({
       },
       rules: 'selectRequired',
     },
+    {
+      component: 'RichEditor',
+      fieldName: 'richEditor',
+      label: '富文本',
+      formItemClass: 'col-span-3 items-baseline',
+    },
   ],
   // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
   wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
@@ -485,6 +491,12 @@ function handleSetFormValue() {
     timePicker: dayjs('2022-01-01 12:00:00'),
     treeSelect: 'leaf1',
     username: '1',
+    richEditor: `
+      <h1>Vben Tiptap</h1>
+      <p>这个编辑器已经被封装在 <code>packages/effects/plugins/src/tiptap</code> 中。</p>
+      <p>你可以直接在各个 app 里通过 <code>@vben/plugins/tiptap</code> 引入。</p>
+      <blockquote>默认内置 StarterKit、Underline、TextAlign、Placeholder。</blockquote>
+    `,
   });
 
   // 设置单个表单值

playground/src/views/examples/tiptap/index.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { VbenTiptap, VbenTiptapPreview } from '@vben/plugins/tiptap';
+
+import { Card } from 'ant-design-vue';
+const content = ref(`
+  <h1>Vben Tiptap</h1>
+  <p>这个编辑器已经被封装在 <code>packages/effects/plugins/src/tiptap</code> 中。</p>
+  <p>你可以直接在各个 app 里通过 <code>@vben/plugins/tiptap</code> 引入。</p>
+  <blockquote>默认内置 StarterKit、Underline、TextAlign、Placeholder。</blockquote>
+`);
+const previewContent = computed(() => content.value);
+</script>
+
+<template>
+  <Page title="Tiptap 富文本">
+    <template #description>
+      <div class="mt-2 text-foreground/80">
+        统一封装后的富文本编辑器，适合在各个 app 中直接复用。
+      </div>
+    </template>
+
+    <Card class="mb-5" title="编辑器">
+      <VbenTiptap v-model="content" />
+    </Card>
+
+    <Card class="mb-5" title="富文本预览">
+      <VbenTiptapPreview :content="previewContent" />
+    </Card>
+
+    <Card title="HTML 输出">
+      <pre class="overflow-auto rounded-xl border border-border bg-muted p-4">
+        {{ previewContent }}
+      </pre>
+    </Card>
+  </Page>
+</template>