[Vuejs]-JSON content shows a blank window for Tiptap-Vuetify?

by

0👍

✅

I figured out the fix:

  1. I didn’t realize I needed to include the :extensions prop for all of the HTML features I wanted to use (bold, italic, etc.) in the editor that would render the HTML. I thought those extensions were just used to add the toolbar buttons, but they are also used to render the JSON that those buttons produce.

  2. To then hide the toolbar, I just used the example toolbar-slot code from the readme, and the toolbar was gone.

Here’s the working code:

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

0👍

When i was looking in the documentation -> Get started
I see that the content is HTML.
As it usually is inside any tiptap.

Your content data is an object with alot of nested data. I don’t think the plugin/component can handle that type of format.

Try save your data as HTML to your .json and there for also fetch the data as HTML from your .json.

Example:

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

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

}

(New to answer questions on stackoverflow)

Leave a comment