Retaining styles and classes in editor content when using VueJS extension Tiptap Vuetify

Question

I integrated a Vue.js extension called tiptap-vuetify into my project. However when the content is injected into the tiptap editor, it automatically strips all classes and inline styling from the HTML, before it displays it in the content editor.

Given the following example:

data () {
   return {
      tiptap: {
         extensions: [
            History,
            Blockquote,
            Link,
            Underline,
            Strike,
            Italic,
            ListItem,
            BulletList,
            OrderedList,
            [ Heading, {
               options: {
                  levels: [1, 2, 3]
               }
            }],
            Bold,
            Code,
            HorizontalRule,
            Paragraph,
            HardBreak
         ],
      },
      content: "<p class='paragraph-class'>paragraph tag with class</p><p style='color:red;'>paragraph class with style</p>"
   }
}

The content injected into the editor consists of two paragraph elements:

<p class='paragraph-class'>paragraph tag with class</p>
<p style='color:red;'>paragraph class with style</p>

However when the content is displayed within the tiptap editor, both the class & style attributes are stripped from the html rendering:

<p>paragraph tag with class</p>
<p>paragraph class with style</p>

How can I prevent the tiptap editor from stripping the style & class attributes from the content when it is displayed in the editor?

Answer 1

Tiptap doesn't manage colors and backgrounds yet. The editor is very simple.

And there is another problem, if you want to export the content with the same style than in the tiptap editor, you can't. Take a look at this: https://github.com/iliyaZelenko/tiptap-vuetify/issues/22