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

import { TiptapVuetify, Vuetify } from 'tiptap-vuetify'
import 'tiptap-vuetify/dist/main.css'

export default {
  components: {
    TiptapVuetify,
  },
  data() {
    return {
      editor: null,
      content: '<p>编辑器内容</p>',
    }
  },
  mounted() {
    this.editor = new TiptapVuetify({
      vuetify: new Vuetify(),
      content: this.content,
    })
  },
}

<template>
  <div>
    <tiptap-vuetify :editor="editor" v-model="content" />
  </div>
</template>

import { Extension, Plugin } from 'tiptap'
import { updateMark, removeMark, pasteRule, markInputRule } from 'tiptap-commands'

class PreserveStyleExtension extends Extension {
  get name() {
    return 'preserveStyle'
  }

  get defaultOptions() {
    return {
      preservedStyles: [],
      preservedClasses: [],
    }
  }

  get plugins() {
    const preservedStyles = this.options.preservedStyles
    const preservedClasses = this.options.preservedClasses

    return [
      new Plugin({
        props: {
          handleDOMEvents: {
            paste(view, event) {
              const clipboardData = event.clipboardData || window.clipboardData
              const text = clipboardData.getData('text/plain')

              if (text) {
                const { state, dispatch } = view
                const { tr } = state
                const { from, to } = state.selection
                const slicedText = text.slice(from, to)

                const preservedMarks = []

                // Preserve styles
                state.schema.marks.forEach(mark => {
                  if (mark.attrs.style && preservedStyles.includes(mark.attrs.style)) {
                    preservedMarks.push(mark)
                  }
                })

                // Preserve classes
                state.schema.marks.forEach(mark => {
                  if (mark.attrs.class && preservedClasses.includes(mark.attrs.class)) {
                    preservedMarks.push(mark)
                  }
                })

                if (preservedMarks.length > 0) {
                  const preservedContent = preservedMarks.reduce((acc, mark) => {
                    return acc.mark(mark)
                  }, state.doc.slice(from, to))

                  const fragment = view.state.schema.nodeFromJSON(preservedContent.content)
                  tr.replaceWith(from, to, fragment)

                  dispatch(tr)
                }
              }

              return false
            },
          },
        },
      }),
    ]
  }
}

// 使用保留样式和类的扩展
const preservedStyles = ['color', 'background-color']
const preservedClasses = ['important', 'highlighted']
const preserveStyleExtension = new PreserveStyleExtension({
  preservedStyles,
  preservedClasses,
})

export default {
  components: {
    TiptapVuetify,
  },
  data() {
    return {
      editor: null,
      content: '<p>编辑器内容</p>',
    }
  },
  mounted() {
    this.editor = new TiptapVuetify({
      vuetify: new Vuetify(),
      content: this.content,
      extensions: [preserveStyleExtension],
    })
  },
}