Extension Groups

The extension groups are a collection of extensions that can be used to create a more complex editor.

Text Extensions

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
  import {
    TextExtensions,
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlBold,
    RTEControlItalic,
    RTEControlUnderline,
    RTEControlStrike,
    RTEControlSubscript,
    RTEControlSuperscript,
    RTEControlFontSize,
    RTEControlBlockQuote,
    RTEControlFontFamily,
    RTEControlTextBlocks,
    RTEControlTextAlignment,
    RTEControlColorPicker,
    RTEControlLineHeight,
  } from '@platform-ui/rte'

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

  const editor1 = new Editor({
    content: 'Refer to Notes on how to use it Better',
    extensions: [
      TextExtensions.configure({}),
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content1.value = editor.getText()
      HTML1.value = editor.getHTML()
    },
  })
</script>
<template>
  <HLTextEditor :editor="editor1">
    <template #header>
      <RTEControlBold :editor="editor1" />
      <RTEControlItalic :editor="editor1" />
      <RTEControlUnderline :editor="editor1" />
      <RTEControlStrike :editor="editor1" />
      <RTEControlSubscript :editor="editor1" />
      <RTEControlSuperscript :editor="editor1" />
      <RTEControlFontSize :editor="editor1" />
      <RTEControlBlockQuote :editor="editor1" />
      <RTEControlFontFamily :editor="editor1" />
      <RTEControlTextAlignment :editor="editor1" />
      <RTEControlColorPicker :editor="editor1" colorFor="highlight" />
      <RTEControlColorPicker :editor="editor1" />
      <RTEControlLineHeight :editor="editor1" />
    </template>
  </HLTextEditor>
</template>

Code Extensions

Vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { HLContentWrap, HLButton } from '@platform-ui/highrise'
  import {
    TextExtensions,
    RequiredExtensions,
    CodeExtensions,
    Editor,
    HLTextEditor,
    RTEControlCode,
  } 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: [
      RequiredExtensions.configure({}),
      CodeExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content2.value = editor.getText()
      HTML2.value = editor.getHTML()
    },
  })
</script>
<template>
  <HLTextEditor :editor="editor2">
    <template #header>
      <RTEControlCode :editor="editor2" />
    </template>
  </HLTextEditor>
</template>