Как использовать v-model для вставки пользовательского HTML в tiptap/vue-3?

Как можно сохранить HTML-разметку при вставке кода в поле редактора @tiptap/vue-3, чтобы избежать удаления тегов, классов и идентификаторов библиотекой?
  • 22 августа 2024 г. 13:13
Ответы на вопрос 2
Для того чтобы использовать v-model для вставки пользовательского HTML в Tiptap/vue-3, необходимо настроить директиву v-model таким образом, чтобы она правильно обрабатывала HTML-код.

Пример:

```vue
<template>
  <Editor v-model="content"/>
</template>

<script>
export default {
  data() {
    return {
      content: "<p><strong>Hello, world!</strong></p>"
    };
  }
};
</script>
```

Чтобы избежать удаления тегов, классов и идентификаторов при вставке HTML-разметки в поле редактора Tiptap/vue-3, можно использовать опцию `content: true` при инициализации редактора.

Пример:

```javascript
import { Editor } from '@tiptap/vue-3';

const editor = new Editor({
  content: true,
  // другие опции редактора
});
```

Таким образом, при вставке HTML-кода в поле редактора Tiptap/vue-3, сохранятся все теги, классы и идентификаторы, указанные пользователем.
import Quill from "quill";

const Block = Quill.import('blots/block');

class CustomDiv extends Block {
    static create(value) {
        let node = super.create();
      // Добавляем кастомный класс
        if (value && value.className) {
            node.setAttribute('class', value.className);
        }
        if (value && value.id) {
            node.setAttribute('id', value.id);
        }
        return node;
    }

    static formats(node) {
        return {
            className: node.getAttribute('class'),
            id: node.getAttribute('id'),
        };
    }

    format(name, value) {
        if (name === 'className' && value) {
            this.domNode.setAttribute('class', value);
        } else if (name === 'id' && value) {
            this.domNode.setAttribute('id', value);
        } else {
            super.format(name, value);
        }
    }
}

CustomDiv.blotName = 'customDiv';
CustomDiv.tagName = 'div';
Quill.register(CustomDiv);

import './CustomQuillFormats.js'; // Подключаем файл с кастомным форматом в редактор
Похожие вопросы