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");
	const stop = (e, ed) => {
		console.log(e.type.toUpperCase(), e, ed);
		e.preventDefault();
		e.cancel();
		e.stopImmediatePropagation();
		e.stopPropagation();
	};
</script>
<template>
	<ClientOnly>
		<vee-field :name="props.name" v-slot="{ errorMessage, field, value, setValue }" :model-value="props.val">
			<a-form-item
				:data-testid="$attrs['data-testid']"
				:validate-status="!!errorMessage ? 'error' : ''"
				:name="props.name"
				:label="props.label as any"
				:help="errorMessage"
			>
				<tinymce-editor
					model-events="drag dragdrop dragend draggesture dragover dragstart drop change"
					v-bind="field"
					width="100%"
					@change="
						(e) => {
							console.debug(e);
							setValue(e);
						}
					"
					:initial-value="value"
					v-model:model-value="field.value"
					@drag="stop"
					@deactivate="(e) => console.log(e)"
					@dragOver="stop"
					@dragEnter="stop"
					@dragEnd="stop"
					@dragDrop="stop"
					@draggesture="stop"
					@dragGesture="stop"
					@dragstart="stop"
					@drop="stop"
					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>