0

背景

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

在此处输入图像描述

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

问题

当我从数据库加载已发送消息的 JSON 时，只显示纯文本消息；如果我应用任何样式（粗体、斜体、列表等），什么都不会出现。

在此处输入图像描述

我用于不可编辑的 Tiptap 实例的代码是这样的：

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

这是上面“bold asdf”示例 的message对象（和）的屏幕截图：message.content在此处输入图像描述

4

2 回答 2

0

当我查看文档->开始时 ，我看到内容是 HTML。因为它通常在任何tiptap中。

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

尝试将您的数据作为 HTML 保存到您的 .json 中，然后从您的 .json 中获取 HTML 格式的数据。

例子：

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

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

}

（新来回答关于stackoverflow的问题）

于 2021-09-22T12:05:43.877 回答
0

我想出了解决办法：

  1. 我没有意识到我需要在将呈现:extensionsHTML的编辑器中包含我想要使用的所有 HTML 功能（粗体、斜体等）的道具。我认为这些扩展只是用于添加工具栏按钮，但它们也用于呈现这些按钮生成的 JSON。

  2. 然后隐藏工具栏，我只使用了自述文件中的示例工具栏插槽代码，工具栏不见了。

这是工作代码：

<tiptap-vuetify
  v-model="message.content"
  :extensions="extensions"
  :editor-properties="{ editable: false }"
>
  <template #toolbar="{ buttons }">
    <pre>{{ buttons }}</pre>
  </template>
</tiptap-vuetify>
于 2021-09-23T05:58:29.150 回答