tiptap/vue 中给editor绑定带有html的值，自动把里面的除了p标签以外的给过滤了

Z时代
2024-02-13
分类：IT

tiptap/vue 中给editor绑定带有html的值，页面显示自动把里面的除了p标签以外的给过滤了，比如我的span标签就没了
代码如下：
<template>

<EditorContent class="common-flex-grow" :editor="editor" />

</div>

</template>

import { Editor, EditorContent } from "@tiptap/vue-2";

import StarterKit from "@tiptap/starter-kit";

import Underline from "@tiptap/extension-underline";

import Highlight from "@tiptap/extension-highlight";

import TextStyle from "@tiptap/extension-text-style";

import TextStyleAttributes from "./text-style-attributes.js";

import CharacterCount from "@tiptap/extension-character-count";

import Placeholder from "@tiptap/extension-placeholder";

import TextAlign from "@tiptap/extension-text-align";

import Paragraph from "@tiptap/extension-paragraph";

import Heading from "@tiptap/extension-heading";

export default {

components: {

EditorContent,

props: {

value: {
  type: String,
  default: ""
},
limit: {
  type: Number,
  default: 0
},
placeholder: {
  type: String,
  default: "请输入..."
}

data() {

return {
  editor: null
};

watch: {

value(value) {
  const isSame = this.editor.getHTML() === value;
  if (isSame) {
    return;
  }
  // this.editor = value
  this.editor.commands.setContent(this.value, false);
}

mounted() {

this.editor = new Editor({
  extensions: [
    StarterKit,
    TextStyle,
    TextStyleAttributes,
    Underline,
    Highlight.configure({ multicolor: true }),
    CharacterCount.configure({
      limit: this.limit
    }),
    Placeholder.configure({
      placeholder: this.placeholder
    }),
    Heading,
    Paragraph,
    TextAlign.configure({
      types: ["heading", "paragraph"]
    })
  ],
  content: this.value,
  onUpdate: () => {
    this.$emit("input", this.editor.getHTML());
  },
  onBlur: () => {
    window.config.isWorking = false;
  },
  onFocus: () => {
    window.config.isWorking = true;
  }
});

beforeDestroy() {

this.editor.destroy();

}

};

</script>

.editor {

width: 100%;

height: 100%;

/deep/ .ProseMirror {

height: 100%;
border: 1px solid #d9d9d9;
padding: 16px;
overflow: auto;
&:focus {
  outline: none;
}
p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #ced4da;
  pointer-events: none;
  height: 0;
}
h1,
h2,
h3,
h4 {
  font-weight: bold;
}
h1 {
  font-size: 28px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 20px;
}
h4 {
  font-size: 16px;
}
mark {
  color: inherit;
}
ul,
ol {
  padding: 0 16px;
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
hr {
  border: none;
  border-top: 1px solid #e8e8e8;
  margin: 16px 0;
}
blockquote {
  padding-left: 16px;
  border-left: 2px solid #e8e8e8;
}