Editor Outputs

The different outputs of the editor allows users to get the content of the editor in different formats.

1. As String

The content of the editor can be accessed as a string using the editor.getText() method.

As String

This is the initial HTML

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
  import {
    AllExtensions,
    History,
    Editor,
    HLTextEditor,
    RTEControlBold,
    RTEControlItalic,
    RTEControlHistory,
    RTEControlToolbarSeparator,
  } from '@platform-ui/rte'

  const content1 = ref()

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

<template>
  <HLTextEditor :editor="editor1">
    <template #header>
      <RTEControlHistory :editor="editor1" type="undo" />
      <RTEControlHistory :editor="editor1" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor1" />
      <RTEControlItalic :editor="editor1" />
    </template>
  </HLTextEditor>
  <div>
    <p>As String</p>
    <code>{{content1}}</code>
  </div>
</template>

2. As HTML

The content of the editor can be accessed as HTML using the editor.getHTML() method.

As HTML

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
  import {
    AllExtensions,
    History,
    Editor,
    HLTextEditor,
    RTEControlBold,
    RTEControlItalic,
    RTEControlHistory,
    RTEControlToolbarSeparator,
  } from '@platform-ui/rte'

  const content2 = ref()
  const HTML2 = ref()

  const editor2 = new Editor({
    content: 'Refer to Notes on how to use it Better',
    extensions: [History, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content2.value = editor.getText()
      HTML2.value = editor.getHTML()
    },
  })
</script>
<template>
  <HLTextEditor :editor="editor2">
    <template #header>
      <RTEControlHistory :editor="editor2" type="undo" />
      <RTEControlHistory :editor="editor2" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor2" />
      <RTEControlItalic :editor="editor2" />
    </template>
  </HLTextEditor>
  <div>
    <p>As HTML</p>
    <code>{{HTML2}}</code>
  </div>
</template>

3. With Internal Styles

The content of the editor can be accessed with the internal styles using the getHTMLWithFonts method.

With Internal Styles

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
  import {
    AllExtensions,
    History,
    Editor,
    HLTextEditor,
    RTEControlBold,
    RTEControlItalic,
    RTEControlHistory,
    RTEControlToolbarSeparator,
    getHTMLWithFonts,
  } from '@platform-ui/rte'

  const content3 = ref()
  const HTML3 = ref()
  const HTML3WithFont = ref()

  const editor3 = new Editor({
    content: 'Refer to Notes on how to use it Better',
    extensions: [History, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content3.value = editor.getText()
      HTML3.value = editor.getHTML()
      HTML3WithFont.value = getHTMLWithFonts(editor.getHTML(), 'Inter')
    },
  })
</script>
<template>
  <HLTextEditor :editor="editor3">
    <template #header>
      <RTEControlHistory :editor="editor3" type="undo" />
      <RTEControlHistory :editor="editor3" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor3" />
      <RTEControlItalic :editor="editor3" />
    </template>
  </HLTextEditor>

  <div>
    <p>With Internal Styles</p>
    <code>{{HTML3WithFont}}</code>
  </div>
</template>

4. As JSON

The content of the editor can be accessed as JSON using the editor.getJSON() method.

As JSON

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
  import {
    AllExtensions,
    History,
    Editor,
    HLTextEditor,
    RTEControlBold,
    RTEControlItalic,
    RTEControlHistory,
    RTEControlToolbarSeparator,
    getJSONWithFonts,
  } from '@platform-ui/rte'

  const content4 = ref()
  const JSON4 = ref()

  const editor4 = new Editor({
    content: 'Refer to Notes on how to use it Better',
    extensions: [History, AllExtensions.configure({})],
    onUpdate({ editor }) {
      content4.value = editor.getText()
      JSON4.value = editor.getJSON()
    },
  })
  JSON4.value = editor4.getJSON()
</script>
<template>
  <HLTextEditor :editor="editor4">
    <template #header>
      <RTEControlHistory :editor="editor4" type="undo" />
      <RTEControlHistory :editor="editor4" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlBold :editor="editor4" />
      <RTEControlItalic :editor="editor4" />
    </template>
  </HLTextEditor>

  <div>
    <p>As JSON</p>
    <code>{{JSON4}}</code>
  </div>
</template>