next/components/baseEditor.vue

35 lines
939 B
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%"
: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>