next/components/baseEditor.vue

<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>