3

我在我的项目中集成了一个调用的 Vue.js 扩展tiptap-vuetify。但是,当内容被注入到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编辑器从内容中剥离样式和类属性?

4

1 回答 1

0

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

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

于 2021-02-10T19:30:12.027 回答