feat: 全局组件添加RichTextarea

apps/web-antd/src/adapter/form.ts

@@ -34,6 +34,8 @@ import {
 } from 'ant-design-vue';
 import { isArray } from 'lodash-es';
 
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+
 // 这里需要自行根据业务组件库进行适配，需要用到的组件都需要在这里类型说明
 export type FormComponentType =
   | 'AutoComplete'
@@ -49,6 +51,7 @@ export type FormComponentType =
   | 'RadioGroup'
   | 'RangePicker'
   | 'Rate'
+  | 'RichTextarea'
   | 'Select'
   | 'Space'
   | 'Switch'
@@ -82,6 +85,7 @@ setupVbenForm<FormComponentType>({
     RadioGroup,
     RangePicker,
     Rate,
+    RichTextarea,
     Select,
     Space,
     Switch,
@@ -98,6 +102,7 @@ setupVbenForm<FormComponentType>({
     modelPropNameMap: {
       Checkbox: 'checked',
       Radio: 'checked',
+      RichTextarea: 'modelValue',
       Switch: 'checked',
       Upload: 'fileList',
     },

apps/web-antd/src/views/system/notice/data.ts

@@ -81,7 +81,10 @@ export const modalSchema: FormSchemaGetter = () => [
     rules: 'required',
   },
   {
-    component: 'Input',
+    component: 'RichTextarea',
+    componentProps: {
+      width: '100%',
+    },
     fieldName: 'noticeContent',
     formItemClass: 'col-span-2',
     label: '公告内容',

apps/web-antd/src/views/system/notice/notice-modal.vue

@@ -7,7 +7,6 @@ import { cloneDeep } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter';
 import { noticeAdd, noticeInfo, noticeUpdate } from '#/api/system/notice';
-import { Tinymce } from '#/components/tinymce';
 
 import { modalSchema } from './data';
 
@@ -70,10 +69,6 @@ async function handleCancel() {
 
 <template>
   <BasicModal :fullscreen-button="true" :title="title" class="w-[800px]">
-    <BasicForm>
+    <BasicForm />
-      <template #noticeContent="slotProps">
-        <Tinymce v-bind="slotProps" width="100%" />
-      </template>
-    </BasicForm>
   </BasicModal>
 </template>