<script setup lang="ts"> import TinymceEditor from "@tinymce/tinymce-vue"; import { useDark } from "@vueuse/core"; import { NamePath } from "ant-design-vue/es/form/interface"; import { Field as VeeField } from "vee-validate"; import tinymce from "tinymce"; const props = defineProps<{ name: string; init: any; label: string; val?: string; width?: number; wrapCol?: any; }>(); let dark = inject<boolean>("dark"); </script> <template> <ClientOnly> <vee-field :name="props.name" v-slot="{ errorMessage, field, value }" :model-value="props.val" > <a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :name="props.name" :label="props.label" :help="errorMessage" > <tinymce-editor v-bind="field" width="100%" :initial-value="value" v-model:model-value="field.value" tinymce-script-src="/tinymce/tinymce.min.js" :init="{ ...props.init, skin: dark ? 'oxide-dark' : 'oxide', content_css: dark ? 'dark' : 'default', }" /> </a-form-item> </vee-field> </ClientOnly> </template>