setContent with HTML?

I’m trying to do a setContent function to pre-populate the text the user entered in a “create” phase. This text has markup in it, and the markup is showing in the element as text, rather than formatting the text as I’d like it to. I’ve not been able to find documentation on how I might get the text to show up as marked-up HTML rather than just text.

My setContent function setContent() { this.$refs.editor_low.setContent({ type: 'doc', content: [{ type: 'paragraph', content: [ { type: 'text', text: this.form.low_criteria, }, ], }], }); }

Editor code: <editor :extensions="extensions" @update="onUpdateLowCriteria" ref="editor_low"> <div slot="menubar" slot-scope="{ nodes, marks }"> <div v-if="nodes && marks" class="border-bottom mb-2"> <component-menubar :nodes="nodes" :marks="marks"></component-menubar> </div> </div> <div slot="content" slot-scope="props"></div> </editor>

`

• There is little planning in place.

• A top down approach is used almost exclusively.

`

[philippkuehn]

Hey @llhilton,

then you have to pass an more complex json to setContent():

this.$refs. editor_low.setContent({
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        {
          "type": "text",
          "text": "This is "
        },
        {
          "type": "text",
          "marks": [
            {
              "type": "bold"
            }
          ],
          "text": "some"
        },
        {
          "type": "text",
          "text": " inserted text. 👋"
        }
      ]
    }
  ]
})

With v0.13.0 it’s also possible to pass a string to setContent(). Maybe that’s easier in your case.

this.$refs.editor_low.setContent('<p>This is <strong>some</strong> inserted text. 👋</p>')

[mike-seekwell]

@duhaime here’s the code for one of our tiptap nodes (DataTag.js)

import { Node } from 'tiptap'

export default class DataTagNode extends Node {

  get name() {
    return 'datatag'
  }

  get schema() {
    return {
      // here you have to specify all values that can be stored in this node
      attrs: {
        uuid: '',
        value: '',
        title: '',
        blockId: '',
        path: '',
      },
      group: 'inline',
      inline: true,
      selectable: false,
      atom: true,
      // parseDOM and toDOM is still required to make copy and paste work
      parseDOM: [{
        tag: 'span',
        getAttrs: dom => ({
          uuid: dom.getAttribute('data-uuid'),
          value: dom.getAttribute('data-value'),
          title: dom.getAttribute('data-title'),
          blockId: dom.getAttribute('data-block-id'),
          path: dom.getAttribute('data-path'),
        }),
      }],
      toDOM: node => [
        'span', 
        {
          'data-uuid': node.attrs.uuid,
          'data-value': node.attrs.value,
          'data-title': node.attrs.title,
          'title': node.attrs.title,
          'data-block-id': node.attrs.blockId,
          'data-path': node.attrs.path,
        },
        `${node.attrs.value}`
      ],
    }
  }

  get view() {
    return {
      props: ['node', 'updateAttrs', 'view'],
      computed: {
        uuid: {
          get() {
            return this.node.attrs.uuid
          },
          set(uuid) {
            this.updateAttrs({
              uuid,
            })
          },
        },
        value: {
          get() {
            return this.node.attrs.value
          },
          set(value) {
            this.updateAttrs({
              value,
            })
          },
        },
        title: {
          get() {
            return this.node.attrs.title
          },
          set(title) {
            this.updateAttrs({
              title,
            })
          },
        },
        blockId: {
          get() {
            return this.node.attrs.blockId
          },
          set(blockId) {
            this.updateAttrs({
              blockId,
            })
          },
        },
        path: {
          get() {
            return this.node.attrs.path
          },
          set(path) {
            this.updateAttrs({
              path,
            })
          },
        },
      },
      template: `
        <span class="datatag clickable" :title="title" :data-title="title" :data-uuid="uuid" :data-value="value" :data-block-id="blockId" :data-path="path">{{title}}</span>
      `,
    }
  }

}