65 lines
1.6 KiB
Vue
65 lines
1.6 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");
|
|
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>
|