46 lines
1.1 KiB
Vue
46 lines
1.1 KiB
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 }"
|
|
:model-value="props.val"
|
|
>
|
|
<a-form-item
|
|
:validate-status="!!errorMessage ? 'error' : undefined"
|
|
:name="props.name"
|
|
:label="props.label"
|
|
:help="errorMessage"
|
|
>
|
|
<tinymce-editor
|
|
v-bind="field"
|
|
width="100%"
|
|
:initial-value="value"
|
|
v-model:model-value="field.value"
|
|
tinymce-script-src="/tinymce/js/tinymce/tinymce.min.js"
|
|
:init="{
|
|
...props.init,
|
|
skin: dark ? 'oxide-dark' : 'oxide',
|
|
content_css: dark ? 'dark' : 'default',
|
|
}"
|
|
/>
|
|
</a-form-item>
|
|
</vee-field>
|
|
</ClientOnly>
|
|
</template>
|