Nuxt•5mo ago

WYSIWYG or Editor.js/Tiptap renderer

How do you render things like Block Editor and WYSIWYG blocks ? I'm working with latest version of Nuxt and Directus annd trying to render "richtext" blocks of directus in Nuxt, how would you do it ? I used to work with Strapi that has a dedicated module for that : https://github.com/freb97/nuxt-strapi-blocks-renderer Just to be clear I'm not looking to have the editor in my frontend but just render the blocks created in backend inside Nuxt as html

6 Replies

Cake•5mo ago

vue's v-html?

El JovialOP•5mo ago

For richtext yes but block editor is returning an object like

{
    "id": 1,
    "block_editor": {
      "time": 1721625817844,
      "blocks": [
        {
          "id": "u4SwkGQtJ4",
          "type": "paragraph",
          "data": {
            "text": "Lorem"
          }
        },
        {
          "id": "pA4Xv6PvY8",
          "type": "header",
          "data": {
            "text": "h1",
            "level": 2
          }
        }
      ],
      "version": "2.29.1"
    },

{
    "id": 1,
    "block_editor": {
      "time": 1721625817844,
      "blocks": [
        {
          "id": "u4SwkGQtJ4",
          "type": "paragraph",
          "data": {
            "text": "Lorem"
          }
        },
        {
          "id": "pA4Xv6PvY8",
          "type": "header",
          "data": {
            "text": "h1",
            "level": 2
          }
        }
      ],
      "version": "2.29.1"
    },

Cake•5mo ago

what are u using to output this?

CaptainThreepwood•5mo ago

Have a look here: https://tiptap.dev/docs/editor/api/utilities/html

HTML utility | Tiptap Editor Docs

Use the HTML Utility in Tiptap to render JSON as HTML and convert HTML to JSON without an editor instance. More in the docs!

CaptainThreepwood•5mo ago

I think what you want is generateHtml from the doc + v-html But for good measure the v-html warning:

Security Warning

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content and never on user-provided content.

Security Warning

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use v-html on trusted content and never on user-provided content.

El JovialOP•5mo ago

Thank you very much @vogtm , this is definitly pointing into the right direction for the Block editor field. But the return data isn't match tiptap one. I'm gonna implement tiptap in directus instead and it should do the work then but I'm so surprised that the regular Block editor of Directus is absolutly useless and that I cannot find any documentation about it... Indeed setting up tiptap editor works like a charm! Only caveat I'm still facing is how to remove some fields of StaterKit (like removing some headings options or list for example) :!

Gaming

Programming

WYSIWYG or Editor.js/Tiptap renderer