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}" :value="val">
			<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :name="props.name" :label="props.label" :value="val">
				<tinymce-editor v-bind="field" width="100%" cloud-channel="6-dev" api-key="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc" 
				:init="{...props.init, 
					skin: props.dark ? 'oxide-dark' : 'oxide', 
					content_css: props.dark ? 'dark' : 'default'}"/>
			</a-form-item>
		</vee-field>
	</ClientOnly>
</template>