простое расширение 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/