Tiptap-Vuetify加载JSON格式富文本时样式内容空白如何解决

背景 #

我使用tiptap-vuetify实现消息/聊天UI，界面包含供用户编写新消息的可编辑Tiptap实例，以及多个用于展示当前会话中已发送消息的不可编辑Tiptap实例。

我将可编辑实例的输出数据设置为JSON格式，存储在数据库的JSONB字段中。

问题描述 #

当我从数据库读取已发消息的JSON内容传入不可编辑Tiptap实例时，仅纯文本内容可正常展示；若内容应用了加粗、斜体、列表等任意样式，对应内容会完全空白无法显示。

我使用的不可编辑Tiptap实例代码如下：

<tiptap-vuetify
  v-model="message.content"
  :editor-properties="{ editable: false }"
  output-format="json"
/>

上述“bold asdf”示例对应的message对象及message.content数据可参考下方截图：

解决方案 #

该问题由不可编辑Tiptap实例未加载对应扩展导致。Tiptap的所有格式解析、渲染都依赖对应扩展实现，无论编辑模式是否开启，只要用到对应格式，就必须加载对应的扩展节点，否则识别不了的标记会被直接忽略，导致内容空白。

按以下步骤修复：

1. 提取可编辑Tiptap实例配置的全部扩展列表，不可编辑实例需要和可编辑实例的扩展配置完全一致，不能删减。
   示例引入代码：

// 引入所有用到的tiptap扩展，和可编辑实例的引入完全一致
import { Bold, Italic, BulletList, ListItem, Heading } from 'tiptap-extensions'

2. 在当前组件的data中声明只读实例使用的扩展数组：

export default {
  data() {
    return {
      readOnlyExtensions: [
        new Bold(),
        new Italic(),
        new BulletList(),
        new ListItem(),
        new Heading({ levels: [1, 2, 3] }),
        // 此处需补全所有你在可编辑实例中用到的扩展，配置参数也和可编辑侧一致
      ]
    }
  }
}

3. 给不可编辑的tiptap-vuetify组件绑定extensions属性：

<tiptap-vuetify
  v-model="message.content"
  :editor-properties="{ editable: false }"
  output-format="json"
  :extensions="readOnlyExtensions"
/>

4. 补充检查：从数据库读取的JSON内容如果是字符串格式，需要先通过JSON.parse()转为JS对象再绑定给message.content，否则也会出现渲染异常。

完成上述配置后，带样式的内容即可正常渲染。

内容的提问来源于stack exchange，提问作者Nathan Wailes