我在我的项目中集成了一个调用的 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编辑器从内容中剥离样式和类属性?