Character Count

This is the Character Count extension. It allows you to count the characters and words in your document, and optionally enforce a character limit.

Default Usage

Default usage of the character count extension showing character and word counts.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlHistory :editor="editor" type="undo" />
      <RTEControlHistory :editor="editor" type="redo" />
    </template>
    <template #footer>
      <div
        class="flex flex-row justify-between w-full"
        style="color: var(--gray-700);"
      >
        <span>Footer</span>
        <HLText size="md" weight="regular" class="flex gap-1">
          <span>
            {{editor.storage.characterCount.characters()}} / 280 characters
          </span>
          |
          <span> {{editor.storage.characterCount.words()}} words </span>
        </HLText>
      </div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref, computed } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlHistory,
    History,
    CharacterCount,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content: 'Type some text to see the character and word count update',
    extensions: [
      History,
      CharacterCount.configure({
        limit: 280,
      }),
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Node Size Mode

Use nodeSize mode instead of textSize for character counting (includes markup). Try to add a list to the editor and see the character count update.

Vue

<template>
  <HLTextEditor :editor="editor2">
    <template #header>
      <RTEControlHistory :editor="editor2" type="undo" />
      <RTEControlHistory :editor="editor2" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlList :editor="editor2" listType="orderedList" />
    </template>
    <template #footer>
      <div style="padding: 8px; border-top: 1px solid #e5e7eb;">
        <span>Footer</span>
        <HLText size="md" weight="regular" class="flex gap-1">
          <span>
            {{editor2.storage.characterCount.characters()}} / 280 characters
          </span>
          <span> {{editor2.storage.characterCount.words()}} words </span>
        </HLText>
      </div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref, computed } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlHistory,
    RTEControlToolbarSeparator,
    History,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content: 'This editor counts using nodeSize mode',
    extensions: [
      History,
      RequiredExtensions.configure({}),
      CharacterCount.configure({
        mode: 'nodeSize',
        limit: 280,
      }),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Commands

Get the number of characters in the document.

// Get the number of characters in the document
editor.storage.characterCount.characters({ mode: 'textSize' })

// Get the number of characters in the document including markup and structure
editor.storage.characterCount.characters({ mode: 'nodeSize' })

Options

Option	Type	Default	Description
limit	number | null	null	Maximum number of characters allowed. Set to null for no limit
mode	'textSize' | 'nodeSize'	'textSize'	Counting mode: textSize counts text content only, nodeSize includes document structure

Notes

• Character count updates in real-time as the user types
• Word count splits on spaces and filters empty strings
• Pasted content that exceeds the limit is automatically trimmed