VueJs 확장 Tiptap Vuetify 사용 시 편집기 콘텐츠에 스타일 및 클래스 유지

VueJs 확장 Tiptap Vuetify 사용 시 편집기 콘텐츠에 스타일 및 클래스 유지

Vue.js 확장자를 통합했습니다.tiptap-vuetify내 프로젝트에 포함시키다.그러나 콘텐츠가 팁탑에디터에 삽입되면 콘텐츠에디터에 표시되기 전에 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>

단, 콘텐츠가 팁탑에디터 내에 표시되었을 경우,class&stylehtml 렌더링에서 Atribute가 삭제됩니다.

<p>paragraph tag with class</p>
<p>paragraph class with style</p>

텍스트가 에디터에 표시될 때 텍스트에서 스타일 및 클래스 속성이 삭제되지 않도록 하려면 어떻게 해야 합니까?

팁탑은 아직 색상과 배경을 관리하지 않습니다.편집자는 매우 간단하다.

그리고 또 다른 문제가 있는데, TIPTAP 에디터와 같은 스타일로 콘텐츠를 내보내려면 내보낼 수 없습니다.여기를 봐주세요.https://github.com/iliyaZelenko/tiptap-vuetify/issues/22

언급URL : https://stackoverflow.com/questions/65961203/retaining-styles-and-classes-in-editor-content-when-using-vuejs-extension-tiptap