Multi Editor

This is a multi editor usage example. It shows how to use two editors side by side. This can be achieved by passing the different editor instances to the editor component.

Usage

This is a usage example of the multi editor feature.

Vue

<div style="display: flex; gap: 10px;">
  <HLTextEditor :editor="editor1">
    <template #header>
      <RTEControlHistory :editor="editor1" type="undo" />
      <RTEControlHistory :editor="editor1" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlList :editor="editor1" listType="orderedList" />
    </template>
  </HLTextEditor>
  <HLTextEditor :editor="editor2">
    <template #header>
      <RTEControlHistory :editor="editor2" type="undo" />
      <RTEControlHistory :editor="editor2" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlList :editor="editor2" />
    </template>
  </HLTextEditor>
</div>

TS

import { ref } from 'vue'
import { HLContentWrap } from '@platform-ui/highrise'
import {
  AllExtensions,
  Editor,
  HLTextEditor,
  RTEControlList,
  RTEControlHistory,
  RTEControlToolbarSeparator,
  History,
  TaskList,
  TaskItem,
} from '@platform-ui/rte'

const content1 = ref()
const HTML1 = ref()

const editor1 = new Editor({
  content: '<p>Create ordered lists with different numbering styles</p>',
  extensions: [History, AllExtensions.configure({})],
  onUpdate({ editor }) {
    content1.value = editor.getText()
    HTML1.value = editor.getHTML()
  },
})

const content2 = ref()
const HTML2 = ref()
const editor2 = new Editor({
  content: '<p>Click any list button to create a list</p>',
  extensions: [History, AllExtensions.configure({})],
  onUpdate({ editor }) {
    content2.value = editor.getText()
    HTML2.value = editor.getHTML()
  },
})