next/components/baseEditor.vue

<script setup lang="ts">
	import TinymceEditor from "@tinymce/tinymce-vue";
	import { Field as VeeField } from "vee-validate";

	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' : ''" :name="props.name" :label="props.label as any" :help="errorMessage">
				<tinymce-editor
					v-bind="field"
					width="100%"
					@change="
						(e) => {
							console.debug(e);
							setValue(e);
						}
					"
					: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>