UBuilder TinyEditor

UBuilder Editor based on TinyMCE 6 on Vue 3.

default usage

<script setup>
import { TinyEditor } from '@ubuilder/tinyeditor';
import { ref } from 'vue';

const content = ref('');
<template>
  <TinyEditor v-model="content" />
</template>

Props and Emits

All props except disabled and readonly are NOT REACTIVE. Initialization only. initOptions overrides all options.

withDefaults(defineProps<{
  modelValue?: string
  documentBaseUrl?: string
  skinUrl?: string
  contentCssUrl?: string
  height?: number | string
  disabled?: boolean | 'true' | 'false' | 'disabled'
  readonly?: boolean | 'true' | 'false' | 'readonly'
  imageUploadUrl?: string
  imageUploadHandler?: RawEditorOptions['images_upload_handler']
  initOptions?: RawEditorOptions
}>(), {
  modelValue: '',
  documentBaseUrl: undefined,
  skinUrl: 'tiny/skins/ui/oxide',
  contentCssUrl: undefined,
  height: '20em',
  disabled: false,
  readonly: false,
  imageUploadUrl: undefined,
  imageUploadHandler: undefined,
  initOptions: () => ({}),
});

defineEmits<{
  (e: 'update:modelValue', value: string): void
}>();