JSON内容显示Tiptap-Vuetify的空白窗口？

Question

背景

我正在使用tiptap-vuetify实现一个消息/聊天UI，其中用户可以看到一个用于创建新消息的可编辑的Tiptap实例，以及几个不可编辑的Tiptap实例(一个实例对应于用户正在查看的线程中每个已发送的消息)。

​

​

我拥有JSON格式的可编辑实例输出数据，并将其存储在数据库中的JSONB字段中。

问题

当我为从数据库发送的消息加载JSON时，只显示纯文本消息；如果我应用了任何类型的样式(粗体、斜体、列表等)，则什么也不显示。

​

​

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

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

下面是上面“粗体asdf”示例的message对象(和message.content)的屏幕截图：

​

Answer 1

当我查看-> Get started的文档时，我发现它的内容是超文本标记语言。就像通常在任何tiptap中一样。

您的内容数据是一个包含大量嵌套数据的对象。我不认为插件/组件可以处理这种类型的格式。

尝试将数据以HTML格式保存到.json，并在那里从.json中获取数据。

示例：

{
  messages: [
    { 
      "id": 1,
      "content": "<p>foo bar</p>"
    },

    { 
      "id": 2,
      "content": "<p>hello world</p>"
    },
  ]

}

(回答有关堆栈溢出的问题的新功能)

Answer 2

我想出了解决办法：

1. 我没有意识到我想要使用的所有:extensions特性(粗体、斜体等)都需要包含HTML。在将呈现HTML的编辑器中。我以为这些扩展只是用来添加工具栏按钮，但它们也用来呈现这些按钮生成的JSON。

要隐藏工具栏，我只是使用了自述文件中的示例-

1. 代码，然后工具栏就消失了。

下面是工作代码：

<tiptap-vuetify
  v-model="message.content"
  :extensions="extensions"
  :editor-properties="{ editable: false }"
>
  <template #toolbar="{ buttons }">
    <pre>{{ buttons }}</pre>
  </template>
</tiptap-vuetify>