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

新手上路,请多包涵

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

<div class="editor common-flex-col">

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

</div>

</template>

<script>

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>

<style lang="less" scoped>

.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;

}

}

}

</style>
// home.vue中是这样的
<Editor v-model="text" class="common-edit-left checkeditor" />

text:'<p> 国务院办公厅关于开展城镇小区配套幼儿园治理工作的通知 </p><p> 国办发〔2019〕3号 </p><p> 各省自治区直辖市人民政府,<span class="light light214">国院</span></p>'

阅读 1.9k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题