next/components/baseEditor.vue

36 lines
1.2 KiB
Vue
Raw Normal View History

<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;
dark?: boolean;
wrapCol?: any;
}>()
onMounted(() => {
// if(typeof navigator != undefined) {
// tinymce.init({...props.init, selector: `textarea[${props.name}]`})
// }
})
// const isDark = useDark()
// console.log("darky")
</script>
<template>
<ClientOnly>
<vee-field :name="props.name" v-slot="{errorMessage, field, value}" :value="val">
<a-form-item :validate-status="!!errorMessage ? 'error' : undefined" :name="props.name" :label="props.label" :value="val">
<tinymce-editor v-bind="field" width="100%" cloud-channel="6-dev" api-key="qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"
:init="{...props.init,
skin: props.dark ? 'oxide-dark' : 'oxide',
content_css: props.dark ? 'dark' : 'default'}"/>
</a-form-item>
</vee-field>
</ClientOnly>
</template>