Skip to content

Slots

All Slots

html
<HLTextEditor :editor="editor1">
  <template #aboveHeader>
    <div class="p-2" style="background-color: lightcoral; border-radius: 7px">
      <span>Above Header</span>
    </div>
  </template>
  <template #header>
    <RTEControlHistory :editor="editor1" type="undo" />
    <RTEControlHistory :editor="editor1" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEControlBold :editor="editor1" />
    <RTEControlItalic :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlColorPicker :editor="editor1" />
    <RTEControlColorPicker :editor="editor1" colorFor="highlight" />
  </template>
  <template #footer>
    <div>Footer</div>
  </template>
  <template #belowHeader>
    <div class="p-2" style="background-color: lightblue;">
      <span>Below Header</span>
    </div>
    <div class="my-2.5 mx-2">
      <div class="p-2" style="background-color: lightgreen;">
        <span>Custom Slot</span>
      </div>
    </div>
  </template>
  <template #aboveFooter>
    <div class="my-2.5 mx-2">
      <div class="p-2" style="background-color: lightgray;">
        <span>Custom Slot</span>
      </div>
    </div>
    <div class="p-2" style="background-color: lightyellow;">
      <span>Above Footer</span>
    </div>
  </template>
  <template #belowFooter>
    <div class="p-2" style="background-color: lightcoral; border-radius: 7px">
      <span>Below Footer</span>
    </div>
  </template>
</HLTextEditor>