Блог

Я интегрировал 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 amp; style удаляются из рендеринга html:

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

Как я могу запретить редактору tiptap удалять атрибуты стиля и класса из содержимого, когда оно отображается в редакторе?

Tiptap пока не управляет цветами и фоном. Редактор очень прост.

И есть еще одна проблема, если вы хотите экспортировать содержимое в том же стиле, что и в редакторе tiptap, вы не можете. Взгляните на это: https://github.com/iliyaZelenko/tiptap-vuetify/issues/22