使用 VueJS 扩展 Tiptap Vuetify 时在编辑器内容中保留样式和类答案

【问题标题】：Retaining styles and classes in editor content when using VueJS extension Tiptap Vuetify使用 VueJS 扩展 Tiptap Vuetify 时在编辑器内容中保留样式和类
【发布时间】：2021-01-29 20:22:31
【问题描述】：

我将一个名为 tiptap-vuetify 的 Vue.js 扩展集成到我的项目中。然而，当内容被注入到 Tiptap 编辑器中时，它会自动从 HTML 中去除所有类和内联样式，然后再将其显示在内容编辑器中。

举个例子：

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>"
   }
}

注入编辑器的内容由两个段落元素组成：

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

但是，当内容在 Tiptap 编辑器中显示时，class 和 style 属性都会从 html 呈现中剥离：

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

如何防止tiptap编辑器在编辑器中显示内容时从内容中剥离样式和类属性？

【问题讨论】：

标签： javascript vue.js vuejs2 vuetify.js tiptap

【解决方案1】：

Tiptap 还不管理颜色和背景。编辑器很简单。

还有一个问题，如果你想导出与tiptap编辑器中风格相同的内容，你不能。看看这个：https://github.com/iliyaZelenko/tiptap-vuetify/issues/22

【讨论】：