Trix: Counting characters

[lcsqlpete]

I'm trying to implement a remaining character counter on a trix editor. I'm using javascript to catch the keyup event and compare the editor's length property with it's maxlength. All works fine until I start adding some formatting, at which point the character count includes those used by the html tags that are added. For example, if I press return, the
tags that are added reduce the character count. That's very confusing for the user because what they see doesn't match the remaining character count. Strangely, adding formatting like Bold doesn't affect the character count until the next time I press return.

Offhand, I can't think of a way to get round this except perhaps to get the trix editor contents in my javascript, strip out any html tags and use the result as the basis for the character count calculation which feels like a pretty major task.

Any ideas?

Details

• Trix version: 0.12.0
• Browser name and version: Chrome 70.0.3538.102
• Operating system: OSX 10.13.6

[javan]

All works fine until I start adding some formatting, at which point the character count includes those used by the html tags that are added.

You can convert the document to a string and get its length instead of the html value.

I'm using javascript to catch the keyup event… Strangely, adding formatting like Bold doesn't affect the character count until the next time I press return.

You'll want to handle the trix-change event instead of keyup.

Offhand, I can't think of a way to get round this

addEventListener("trix-change", event => {
  const { editor } = event.target
  const string = editor.getDocument().toString()
  const characterCount = string.length - 1
  console.log(`The document has ${characterCount} characters`)
})

[lcsqlpete]

I ended up not using the html maxlength attribute and writing my own logic to mimic it. I added a data-maxlength attribute to the editor and used it in the character count calculation. If the number of chars in the editor is greater than maxlength, I used setSelectedRang to select the complete editor contents and insertString to replace it with substring 0 to maxlength of the editor.