Editor

The editor is the main component that allows you to edit the content of the text editor.

Basic Usage

HLTextEditor is the main component that allows you to edit the content of the text editor.

As String

This is the initial HTML

As HTML

<p style="padding-left: 0px!important;">This is the initial HTML</p>

Vue

<HLTextEditor :editor="editor">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
</HLTextEditor>

Script

import { ref } from 'vue'
import {
  AllExtensions,
  History,
  Editor,
  HLTextEditor,
  RTEControlHistory,
} from '@platform-ui/rte'

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

const insertHTML = () => {
  const content = window.prompt('Paste the HTML', HTML.value)
  editor.commands.setContent(content)
  content.value = editor.getText()
  HTML.value = editor.getHTML()
}

Without Paste Formatting

When the formatOnPaste prop is set to false, the pasted content will not be formatted.

Vue

<HLTextEditor :editor="editor" :formatOnPaste="false">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
</HLTextEditor>

Size

Custom size of the editor can be set using the size prop. Available sizes: 3xs, 2xs, xs, sm, md, lg.

Vue

<HLTextEditor :editor="editor" size="3xs">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
</HLTextEditor>

Disabled

When the disabled prop is set to true, the editor will be disabled. User will not be able to edit the content.

Vue

<HLTextEditor :editor="editor" :disabled="true">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
</HLTextEditor>

Error

When the error prop is set to true, the editor will show an error state.

Vue

<HLTextEditor :editor="editor" :error="true">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
</HLTextEditor>

Non Resizable

When the resizable prop is set to false. User will not be able to resize the editor.

Vue

<HLTextEditor :editor="editor" :resizable="false">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
</HLTextEditor>

Imports

import { ref } from 'vue'
import {
  AllExtensions,
  History,
  Editor,
  HLTextEditor,
  RTEControlHistory,
} from '@platform-ui/rte'

Props

Prop	Type	Description	Default
editor	Editor	The editor instance.	null
containerClass	string	The class to use for the container.	''
language	Languages	The language to use in the editor.	en-US
formatOnPaste	boolean	Whether to format the pasted content.	false
countClass	string	The class to use for the count.	''
size	3xs | 2xs | xs | sm | md | lg	The size of the editor.	'sm'
disabled	boolean	Whether the editor is disabled.	false
error	boolean	Whether the editor has an error.	false
resizable	boolean	Whether the editor is resizable.	true
fallbackFontSize	number	The fallback font size.	depends on size prop

Slots

Slot	Description	Default
aboveHeader	The slot for the above header.	null
header	The slot for the header.	null
belowHeader	The slot for the below header.	null
aboveFooter	The slot for the above footer.	null
footer	The slot for the footer.	null
belowFooter	The slot for the below footer.	null