字符计数扩展

CharacterCount 扩展限制允许的字符数量为特定长度，并能够返回字符和单词的数量。就这些，没有别的。

安装

npm install @tiptap/extensions

使用

import { Editor } from '@tiptap/core'
import { CharacterCount } from '@tiptap/extensions'

new Editor({
  extensions: [CharacterCount],
})

设置

limit

应该允许的最大字符数。

默认值: null

CharacterCount.configure({
  limit: 240,
})

mode

计算大小所使用的模式。

默认值: 'textSize'

CharacterCount.configure({
  mode: 'nodeSize',
})

textCounter

要使用的文本计数器函数。默认为简单的字符计数。

默认值: (text) => text.length

CharacterCount.configure({
  textCounter: (text) => [...new Intl.Segmenter().segment(text)].length,
})

wordCounter

要使用的单词计数器函数。默认为简单的单词计数。

默认值: (text) => text.split(' ').filter((word) => word !== '').length

CharacterCount.configure({
  wordCounter: (text) => text.split(/\s+/).filter((word) => word !== '').length,
})

存储

characters()

获取当前文档的字符数。

editor.storage.characterCount.characters()

// 获取特定节点的大小。
editor.storage.characterCount.characters({ node: someCustomNode })

// 重写默认的 `mode`。
editor.storage.characterCount.characters({ mode: 'nodeSize' })

words()

获取当前文档的单词数。

editor.storage.characterCount.words()

// 获取特定节点的单词数。
editor.storage.characterCount.words({ node: someCustomNode })

源代码

packages/extensions/src/character-count/

最小安装

import { Editor } from '@tiptap/core'
import { CharacterCount } from '@tiptap/extensions/character-count'

new Editor({
  extensions: [CharacterCount],
})