Editor Toolbar

Top

Vue

<HLTextEditor :editor="editor1">
  <template #header>
    <RTEControlHistory :editor="editor1" type="undo" />
    <RTEControlHistory :editor="editor1" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEControlBold :editor="editor1" />
    <RTEControlUnderline :editor="editor1" />
    <RTEControlItalic :editor="editor1" />
    <RTEControlStrike :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlList :editor="editor1" listType="orderedList" />
    <RTEControlList :editor="editor1" listType="upperRomanList" />
    <RTEControlSubscript :editor="editor1" />
    <RTEControlSuperscript :editor="editor1" />
    <RTEControlCode :editor="editor1" />
    <RTEControlCode :editor="editor1" type="block" />
    <RTEControlEmbedImage :editor="editor1" />
    <RTEControlEmbedLink :editor="editor1" />
    <RTEControlEmbedVideo :editor="editor1" />
  </template>
  <template #footer>
    <RTEControlFontFamily :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlTextBlocks :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlFontSize :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlBold :editor="editor1" />
    <RTEControlUnderline :editor="editor1" />
    <RTEControlItalic :editor="editor1" />
    <RTEControlStrike :editor="editor1" />
    <RTEControlColorPicker :editor="editor1" />
    <RTEControlColorPicker :editor="editor1" colorFor="highlight" />
    <RTEControlToolbarSeparator />
    <RTEControlCustomPopover
      :editor="editor1"
      trigger="click"
      placement="bottom"
    >
      <template #default>
        <RTEControlTextAlignment :editor="editor1" align="left" />
        <RTEControlTextAlignment :editor="editor1" align="center" />
        <RTEControlTextAlignment :editor="editor1" align="right" />
        <RTEControlTextAlignment :editor="editor1" align="justify" />
      </template>
      <template #icon>
        <AlignLeftIcon />
      </template>
    </RTEControlCustomPopover>
    <RTEControlToolbarSeparator />
    <RTEControlCustomPopover
      :editor="editor1"
      trigger="click"
      placement="bottom"
    >
      <template #default>
        <RTEControlList :editor="editor1" listType="bulletList" />
        <RTEControlList :editor="editor1" listType="circleList" />
        <RTEControlList :editor="editor1" listType="squareList" />
        <RTEControlList :editor="editor1" listType="orderedList" />
        <RTEControlList :editor="editor1" listType="lowerAlphaList" />
        <RTEControlList :editor="editor1" listType="lowerGreekList" />
        <RTEControlList :editor="editor1" listType="lowerRomanList" />
        <RTEControlList :editor="editor1" listType="upperAlphaList" />
        <RTEControlList :editor="editor1" listType="upperRomanList" />
      </template>
      <template #icon>
        <MaterialFormatListBulletedFillIcon />
      </template>
    </RTEControlCustomPopover>
    <RTEControlToolbarSeparator />
    <RTEControlIndent :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlCode :editor="editor1" />
    <RTEControlCode :editor="editor1" type="block" />
    <RTEControlToolbarSeparator />
    <RTEControlCustomPopover
      :editor="editor1"
      trigger="click"
      placement="bottom"
    >
      <template #default>
        <RTEControlList :editor="editor1" listType="bulletList" />
        <RTEControlList :editor="editor1" listType="circleList" />
        <RTEControlList :editor="editor1" listType="squareList" />
        <RTEControlList :editor="editor1" listType="orderedList" />
        <RTEControlList :editor="editor1" listType="lowerAlphaList" />
        <RTEControlList :editor="editor1" listType="lowerGreekList" />
        <RTEControlList :editor="editor1" listType="lowerRomanList" />
        <RTEControlList :editor="editor1" listType="upperAlphaList" />
        <RTEControlList :editor="editor1" listType="upperRomanList" />
      </template>
    </RTEControlCustomPopover>
  </template>
</HLTextEditor>

Bottom

Custom Actions

Vue

<HLTextEditor :editor="editor1">
  <template #header>
    <RTEControlHistory :editor="editor1" type="undo" />
    <RTEControlHistory :editor="editor1" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEControl
      :editor="editor1"
      id="custom-action1"
      tooltip-label="Custom Action"
      tooltip-position="bottom"
      @onClick="handleCustomAction1"
    >
      <PlaceholderIcon />
    </RTEControl>
    <RTEControl
      :editor="editor1"
      id="custom-action2"
      tooltip-label="AI Action"
      tooltip-position="bottom"
      @onClick="handleCustomAction2"
    >
      <CustomContentAiIcon />
    </RTEControl>
  </template>
</HLTextEditor>

Imports

import {
  AllExtensions,
  Editor,
  HLTextEditor,
  RTEControl,
  RTEControlHistory,
  RTEControlToolbarSeparator,
  RTEControlCustomPopover,
  RTEControlList,
  RTEControlFontFamily,
  RTEControlTextBlocks,
  RTEControlFontSize,
  RTEControlStrike,
  RTEControlTextAlignment,
  RTEControlBlockQuote,
  RTEControlSubscript,
  RTEControlSuperscript,
  RTEControlCode,
  RTEControlUnderline,
  RTEFloatingToolbar,
  RTEControlIndent,
  RTEControlLineHeight,
  RTEControlEmbedLink,
  History,
} from '@platform-ui/rte'