HighRise-RTE

Editor Sizes ​

The Different Sizes of the Editor allows users to choose the appropriate size for their content.

Large Size ​

html
<HLTextEditor :editor="editor" size="lg">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
  <template #footer>
    <HLText size="md" weight="regular" class="w-full">
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <span class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </span>
      </div>
    </HLText>
  </template>
</HLTextEditor>

Medium Size ​

html
<HLTextEditor :editor="editor" size="md">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
  <template #footer>
    <HLText size="sm" weight="regular" class="w-full">
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <span class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </span>
      </div>
    </HLText>
  </template>
</HLTextEditor>

Small Size ​

html
<HLTextEditor :editor="editor" size="sm">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
  <template #footer>
    <HLText size="xs" weight="regular" class="w-full">
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <span class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </span>
      </div>
    </HLText>
  </template>
</HLTextEditor>

Extra Small Size ​

html
<HLTextEditor :editor="editor" size="xs">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
  <template #footer>
    <HLText size="2xs" weight="regular" class="w-full">
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <span class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </span>
      </div>
    </HLText>
  </template>
</HLTextEditor>

2 Extra Small Size ​

html
<HLTextEditor :editor="editor" size="2xs">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
  <template #footer>
    <HLText size="3xs" weight="regular" class="w-full">
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <span class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </span>
      </div>
    </HLText>
  </template>
</HLTextEditor>

3 Extra Small Size ​

html
<HLTextEditor :editor="editor" size="3xs">
  <template #header>
    <RTEControlHistory :editor="editor" type="undo" />
    <RTEControlHistory :editor="editor" type="redo" />
  </template>
  <template #footer>
    <HLText size="4xs" weight="regular" class="w-full">
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <span class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </span>
      </div>
    </HLText>
  </template>
</HLTextEditor>