Блог

Главная - Вопросы по программированию - Содержимое JSON показывает пустое окно для Tiptap-Vuetify?

Содержимое JSON показывает пустое окно для Tiptap-Vuetify?

#vue.js #vuetify.js #tiptap

Вопрос:

Фон

Я использую tiptap-vuetify для реализации пользовательского интерфейса сообщений/чатов, в котором пользователи видят редактируемый экземпляр Tiptap для создания новых сообщений, а также несколько неотредактируемых экземпляров Tiptap (по одному для каждого уже отправленного сообщения в потоке, который просматривает пользователь).

введите описание изображения здесь

У меня есть выходные данные редактируемого экземпляра в формате JSON, которые я храню в своей базе данных в поле JSONB.

Проблема

Когда я загружаю JSON для отправленных сообщений из базы данных, отображаются только текстовые сообщения; если я применил какой-либо стиль (полужирный, курсив, списки и т.д.), Вообще ничего не отображается.

введите описание изображения здесь

Код, который я использую для неотредактируемых экземпляров Tiptap, выглядит следующим образом:

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

Вот скриншот message объекта (и message.content ) для примера «полужирного asdf» выше:
введите описание изображения здесь

Ответ №1:

Когда я просматривал документацию -> >Начало работы, я увидел, что содержимое является HTML. Как это обычно бывает внутри любого наконечника.

Ваши данные контента-это объект с большим количеством вложенных данных. Я не думаю, что плагин/компонент может обрабатывать формат такого типа.

Попробуйте сохранить свои данные в формате HTML на свой .json, а также для получения данных в виде HTML из вашего .json.

Пример:

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

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

}

(Новичок, отвечающий на вопросы о stackoverflow)

Комментарии:

1. Спасибо за ответ, но если вы посмотрите документацию Tiptap, кажется, что в ней говорится, что предоставление JSON в качестве содержимого должно работать: tiptap.dev/api/команды/набор содержимого «Команда setContent заменяет документ новым. Вы можете передать JSON или HTML, оба работают нормально. Это в основном то же самое, что настроить содержимое при инициализации».

Ответ №2:

Я придумал, как это исправить:

  1. Я не понимал, что мне нужно включить :extensions поддержку всех функций HTML, которые я хотел использовать (полужирный шрифт, курсив и т.д.) В редакторе, который будет отображать HTML. Я думал, что эти расширения использовались только для добавления кнопок панели инструментов, но они также используются для визуализации JSON, создаваемого этими кнопками.
  2. Чтобы затем скрыть панель инструментов, я просто использовал пример кода панели инструментов-слота из readme, и панель инструментов исчезла.

Вот рабочий код:

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