простое расширение tiptap или плагин prosemirror

Я хотел бы использовать редактор tiptap для vuejs, которые работают с редактором prosemirror.

Я много читал о tiptap, но документация не самая лучшая, а сама программа prosemirror очень сложна для меня. Я надеюсь, что вы можете мне помочь.

Я бы хотел реализовать собственное расширение в редакторе подсказок. Например, в меню я хотел бы нажать кнопку и вставить div в текстовое поле. Div может иметь много атрибутов, например<div class="rectangle_var" company="example company" var-id="5124">text example</div>и должен выглядеть как прямоугольник. Прямоугольник также должен иметь светло-серый цвет и может иметь текст, такой как "пример текста" в примере.

Это расширение звучит очень просто, но я не знаю, как создать свои собственные расширения для подсказки. Можешь мне помочь?

1 ответ

Документация для подсказок не так полна, поэтому вы можете просто взглянуть на исходный код расширений. Например: https://github.com/ueberdosis/tiptap/tree/master/packages/tiptap-extensions/src/marks

Маркировка довольно проста. Вам нужно определить схему с помощьюparseDOM а потом toDOM. Документы prosemirror все расскажут. Они плотные, но хорошие https://prosemirror.net/docs/guide/

Редактор отделен от элементов управления. Взгляните на все примеры подсказок для запуска вашего плагина. https://tiptap.dev/

Другие вопросы по тегам