字符计数扩展

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,
})

autoTrim

设置是否在以编程方式设置超出限制的内容时自动修剪内容。如果设置为 false，内容将不会自动修剪，从而允许您手动处理多余的内容。

默认值: true

CharacterCount.configure({
  limit: 240,
  autoTrim: false,
})

mode

计算大小所使用的模式。

默认值: 'textSize'

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

autoTrim

控制在初始内容超出配置限制时是否自动修剪。当设置为 false 时，超出限制的初始内容会被保留。在文档仍然超出限制期间，任何会增加内容大小的事务都会被阻止。

默认值: true

CharacterCount.configure({
  limit: 280,
  autoTrim: false, // 保留超出限制的初始内容
})

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/extension-character-count'

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

Previously气泡菜单

Next up协作编辑