Slots
Starting from version 3.0, Umo Editor provides slot functionality, allowing users to implement more custom features through slots.
Toolbar Slots
Use slots to insert custom content after specific menus in the toolbar.
<template>
<umo-editor v-bind="options">
<!-- Slot for the "Base" menu -->
<template #toolbar_base="props">
<span>toolbar_base slot: {{ props }}</span>
</template>
<!-- Slot for the "Insert" menu -->
<template #toolbar_insert="props">
<span>toolbar_insert slot: {{ props }}</span>
</template>
<!-- Slot for the "Table" menu -->
<template #toolbar_table="props">
<span>toolbar_table slot: {{ props }}</span>
</template>
<!-- Slot for the "Tools" menu -->
<template #toolbar_tools="props">
<span>toolbar_tools slot: {{ props }}</span>
</template>
<!-- Slot for the "Page" menu -->
<template #toolbar_page="props">
<span>toolbar_page slot: {{ props }}</span>
</template>
<!-- Slot for the "Export" menu -->
<template #toolbar_export="props">
<span>toolbar_export slot: {{ props }}</span>
</template>
</umo-editor>
</template>
<script setup>
import { ref } from 'vue'
import { UmoEditor } from '@umoteam/editor';
const options = ref({
// Configuration options
// ...
});
</script>Named Slots
toolbar_base: Insert custom content after the “Start” menu in the toolbar.toolbar_insert: Insert custom content after the “Insert” menu in the toolbar.toolbar_table: Insert custom content after the “Table” menu in the toolbar.toolbar_tools: Insert custom content after the “Tools” menu in the toolbar.toolbar_page: Insert custom content after the “Page” menu in the toolbar.toolbar_export: Insert custom content after the “Export” menu in the toolbar.
Slot Parameters
toolbar-mode:StringThe toolbar type currently selected by the user. Possible values are:ribbon,classic.
Bubble Menu Slot
Use slots to insert custom content after the bubble menu. Currently, only adding custom content to text nodes is supported.
<template>
<umo-editor v-bind="options">
<template #bubble_menu>
<span>slot</span>
</template>
</umo-editor>
</template>
<script setup>
import { ref } from 'vue'
import { UmoEditor } from '@umoteam/editor';
const options = ref({
// Configuration options
// ...
});
</script>