Floating Toolbar

The Floating Toolbar component provides a floating, context-aware toolbar within the editor, allowing users to access formatting and editing options seamlessly.

Top Up

Vue

<HLTextEditor :editor="editor1">
  <template #header>
    <RTEControlHistory :editor="editor1" type="undo" />
    <RTEControlHistory :editor="editor1" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEFloatingToolbar
      trigger="click"
      tooltip-label="More Options"
      placement="top"
    >
      <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>
    </RTEFloatingToolbar>
    <RTEControlLineHeight :editor="editor1" />
    <RTEControlToolbarSeparator />
    <RTEControlEmbedLink :editor="editor1" />
  </template>
  <template #footer>
    <div>Footer</div>
  </template>
</HLTextEditor>

Top Down

Vue

<HLTextEditor :editor="editor2">
  <template #header>
    <RTEControlHistory :editor="editor2" type="undo" />
    <RTEControlHistory :editor="editor2" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEFloatingToolbar
      trigger="click"
      tooltip-label="More Options"
      placement="bottom"
    >
      <RTEControlFontFamily :editor="editor2" />
      <RTEControlToolbarSeparator />
      <RTEControlTextBlocks :editor="editor2" />
      <RTEControlToolbarSeparator />
      <RTEControlFontSize :editor="editor2" />
    </RTEFloatingToolbar>
    <RTEControlLineHeight :editor="editor2" />
    <RTEControlToolbarSeparator />
    <RTEControlEmbedLink :editor="editor2" />
  </template>
  <template #footer>
    <div>Footer</div>
  </template>
</HLTextEditor>

Bottom Up

Vue

<HLTextEditor :editor="editor3">
  <template #footer>
    <RTEControlHistory :editor="editor3" type="undo" />
    <RTEControlHistory :editor="editor3" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEFloatingToolbar
      trigger="click"
      tooltip-label="More Options"
      placement="top"
    >
      <RTEControlFontFamily :editor="editor3" />
      <RTEControlToolbarSeparator />
      <RTEControlTextBlocks :editor="editor3" />
    </RTEFloatingToolbar>
    <RTEControlLineHeight :editor="editor3" />
    <RTEControlToolbarSeparator />
    <RTEControlEmbedLink :editor="editor3" />
  </template>
</HLTextEditor>

Bottom Down

Vue

<HLTextEditor :editor="editor4">
  <template #footer>
    <RTEControlHistory :editor="editor4" type="undo" />
    <RTEControlHistory :editor="editor4" type="redo" />
    <RTEControlToolbarSeparator />
    <RTEFloatingToolbar
      trigger="click"
      tooltip-label="More Options"
      placement="bottom"
    >
      <RTEControlFontFamily :editor="editor4" />
      <RTEControlToolbarSeparator />
      <RTEControlTextBlocks :editor="editor4" />
      <RTEControlToolbarSeparator />
      <RTEControlFontSize :editor="editor4" />
    </RTEFloatingToolbar>
    <RTEControlLineHeight :editor="editor4" />
    <RTEControlToolbarSeparator />
    <RTEControlEmbedLink :editor="editor4" />
  </template>
</HLTextEditor>

Imports

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

Props

Prop	Type	Default	Description
trigger	string	'click'	The trigger for the floating toolbar
tooltip-label	string	``	The label for the floating toolbar
placement	'top' | 'bottom'	top	The placement of the floating toolbar
max-width	string	400px	The maximum width of the floating toolbar
class-name	string	''	The class name for the floating toolbar

Slots

Slot	Default	Description
default	null	The default slot for the floating toolbar
trigger	FormatColorTextIcon	The trigger slot for the floating toolbar