---
title: "隐形字符扩展"
description: "允许您的用户查看空格、硬换行和段落等隐形字符。更多内容请参阅文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/functionality/invisiblecharacters"
---

# 隐形字符扩展

允许您的用户查看空格、硬换行和段落等隐形字符。更多内容请参阅文档！

此扩展添加装饰器以显示不可打印字符，帮助您提升无障碍性。

> **Interactive demo:** [InvisibleCharacters](https://embed.tiptap.dev/preview/Extensions/InvisibleCharacters)

## 安装

```bash
npm install @tiptap/extension-invisible-characters
```

## 设置

### visible

定义默认的可见性。

默认值: `true`

```js
InvisibleCharacters.configure({
  visible: false,
})
```

### builders

一个隐形字符数组 – 默认包括：空格、硬换行和段落。

默认值: `[new SpaceCharacter(), new HardBreakNode(), new ParagraphNode()]`

```js
import InvisibleCharacters, { SpaceCharacter } from '@tiptap/extension-invisible-characters'

// [...]

InvisibleCharacters.configure({
  builders: [new SpaceCharacter(), new YourCustomInvisibleCharacter()],
})
```

### injectCSS

默认情况下，此扩展会注入一些 CSS。您可以通过 `injectCSS` 禁用此功能。

默认值: `true`

```js
InvisibleCharacters.configure({
  injectCSS: false,
})
```

### injectNonce

当您使用带有 `nonce` 的[内容安全策略](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)时，可以指定一个 `nonce`，以添加到动态创建的元素中。示例如下：

默认值: `undefined`

```js
InvisibleCharacters.configure({
  injectCSS: false,
  injectNonce: 'your-nonce-here',
})
```

## 存储

### visibility()

确定隐形字符的可见性是否处于激活状态。

```js
editor.storage.invisibleCharacters.visibility()
```

## 命令

### showInvisibleCharacters()

显示隐形字符。您也可以传递 `false` 来使用同一命令隐藏它们。

```js
editor.commands.showInvisibleCharacters()
```

### hideInvisibleCharacters()

隐藏隐形字符。

```js
editor.commands.hideInvisibleCharacters()
```

### toggleInvisibleCharacters()

切换隐形字符的可见性。

```js
editor.commands.toggleInvisibleCharacters()
```

## 自定义隐形字符

要创建自定义隐形字符，您可以扩展包中提供的类。

### InvisibleCharacter

```js
import InvisibleCharacters, { InvisibleCharacter } from '@tiptap/extension-invisible-characters'

class MyInvisibleCharacter extends InvisibleCharacter {
  constructor() {
    super({
      type: 'my-invisible-character',
      predicate: (value) => value === '+',
    })
  }
}

// … 使用方式如下
new Editor({
  extensions: [InvisibleCharacters.configure({ builders: [new MyInvisibleCharacter()] })],
})
```

在 CSS 中选择装饰时，可以使用以下选择器：

```css
.Tiptap-invisible-character.Tiptap-invisible-character--my-invisible-character {
  // …
}
```

### InvisibleNode

```js
import InvisibleCharacters, { InvisibleNode } from '@tiptap/extension-invisible-characters'

class MyInvisibleNode extends InvisibleNode {
  constructor() {
    super({
      type: 'my-invisible-node',
      predicate: (node) => node.type === node.type.schema.nodes.listItem,
    })
  }
}

// … 使用方式如下
new Editor({
  extensions: [InvisibleCharacters.configure({ builders: [new MyInvisibleNode()] })],
})
```

在 CSS 中选择装饰时，可以使用以下选择器：

```css
.Tiptap-invisible-character.Tiptap-invisible-character--my-invisible-node {
  // …
}
```