Bold

This is the Bold extension. It allows you to make text bold.

Usage

Default usage of the bold extension and its control button.

Bold

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import {
  RequiredExtensions,
  Bold,
  Editor,
  HLTextEditor,
  RTEControlBold,
  RTEControlHistory,
  RTEControlToolbarSeparator,
  FontWeight,
} from '@platform-ui/rte'

const content = ref()
const HTML = ref()

const editor = new Editor({
  content: 'Refer to Notes on how to use it Better',
  extensions: [History, Bold, FontWeight, RequiredExtensions.configure({})],
  onUpdate({ editor }) {
    content.value = editor.getText()
    HTML.value = editor.getHTML()
  },
})
</script>

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlBold,
  RTEControlHistory,
  RTEControlToolbarSeparator,
  History,
  Bold,
  FontWeight,
} from '@platform-ui/rte'

Commands

editor?.chain().focus().toggleBold().run()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
tooltipLabel	string	-	The tooltip label
tooltipPosition	string	'top'	The tooltip position
language	string	'en-US'	The language
ariaLabel	string	Bold	The aria label

Slots

Slot	Description	Default
icon	The icon to display	Bold01Icon