41 lines
1.0 KiB
Vue
41 lines
1.0 KiB
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>
|