Slots

Since version v3.0, Umo Editor provides slot functionality, allowing users to customize more features through slots.

Toolbar Slots

Use slots to insert custom content after specific menus in the toolbar.

<template>
  <umo-editor v-bind="options">
    <!-- "Home" menu slot -->
    <template #toolbar_base="props">
      <span>toolbar_base slot: {{ props }}</span>
    </template>
    <!-- "Insert" menu slot -->
    <template #toolbar_insert="props">
      <span>toolbar_insert slot: {{ props }}</span>
    </template>
    <!-- "Table" menu slot -->
    <template #toolbar_table="props">
      <span>toolbar_table slot: {{ props }}</span>
    </template>
    <!-- "Tools" menu slot -->
    <template #toolbar_tools="props">
      <span>toolbar_tools slot: {{ props }}</span>
    </template>
    <!-- "Page" menu slot -->
    <template #toolbar_page="props">
      <span>toolbar_page slot: {{ props }}</span>
    </template>
    <!-- "Export" menu slot -->
    <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 Arguments

toolbar-mode: String The current toolbar type selected by the user, possible values are: ribbon, classic.

Bubble Menu Slot

Via the slot, custom content can be inserted after the bubble menu, currently only supporting the addition of custom content to text nodes.

<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>

Header and Footer Slots New in v4.1.0

Customize header and footer content through slots.

<template>
  <umo-editor v-bind="options">
    <!-- "Header" slot -->
    <template #page_header="props">
      <span>page_header slot: {{ props }}</span>
    </template>
    <!-- "Footer" slot -->
    <template #page_footer="props">
      <span>page_footer 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

page_header: Header slot, customize the header content through this slot.
page_footer: Footer slot, customize the footer content through this slot.

Slot Arguments

page-number: Number The current page number.
total-pages: Number The total number of pages in the document.

Themes Introduction