Color

This is the Color extension. It allows you to make text color.

Text Color

Default usage of the text color extension and its control button.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlColorPicker :editor="editor" />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Color,
    Editor,
    HLTextEditor,
    RTEControlColorPicker,
  } 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: [Color, RequiredExtensions.configure({})],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Text Highlight

Vue

<HLTextEditor :editor="editor">
  <template #header>
    <RTEControlColorPicker :editor="editor" />
  </template>
  <template #footer>
    <div>Footer</div>
  </template>
</HLTextEditor>

Disabled

Vue

<HLTextEditor :editor="editor3">
  <template #header>
    <RTEControlColorPicker :editor="editor3" disabled />
  </template>
</HLTextEditor>

Default Color

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlColorPicker :editor="editor" defaultColor="#18A058" />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Color,
    Editor,
    HLTextEditor,
    RTEControlColorPicker,
  } 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: [
      Color,
      RequiredExtensions.configure({
        paragraph: {
          HTMLAttributes: {
            style: 'color: #18A058',
          },
        },
        heading: {
          HTMLAttributes: {
            style: 'color: #18A058',
          },
        },
      }),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Picker Position

Vue

<HLTextEditor :editor="editor5">
  <template #header>
    <RTEControlColorPicker :editor="editor5" pickerPosition="right" />
  </template>
</HLTextEditor>

Commands

Text Color

editor?.chain().focus().setColor(colorValue).run()

Text Highlight

editor?.chain().focus().setHighlight({ color: colorValue }).run()

Imports

import {
  RequiredExtensions,
  Color,
  Editor,
  HLTextEditor,
  RTEControlColorPicker,
} from '@platform-ui/rte'

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
tooltipLabel	string	Text Color	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language
ariaLabel	string	Text Color	The aria label
pickerPosition	string	'bottom'	The picker position
disabled	boolean	false	The disabled state
colorFor	text | highlight	'text'	The color for text or highlight
defaultColor	string	'rgba(0, 0, 0, 1)'	The default color
type	hex | rgba	'rgba'	The type of color
to	string | HTMLElement	undefined	The target element

Slots

Slot	Description	Default
icon	The icon to display	ColorPickerIcon