tiptap

Vue.js and Tiptap Menu Bubble: how to build

In this tutorial we will learn how to set up a simple text editor using Vue.js and Tiptap, in particular we’ll be recreating the Menu Bubble example seen here https://tiptap.dev/menu-bubble. We will also add extra functionality to load and save a text file. There are no step by step instructions on how to set up that example in the documentation, so I wanted to write a quick tutorial about it. The example on the tiptap website uses custom svg files for the icons, but fontawesome has some nice icons so let us use those instead. Fontawesome is a very nice…

Text highlighting for a Vue.js text editor: how to

In this article we will look at a way to implement a Vue.js text editor that will allow highlighting selected text. For this we will be using Vue.js and the tiptap library. We will be building on a project from a previous article about the tiptap library: Vue.js and tiptap menu bubble: how to build. The completed project can be found in my github repository here. Prerequisites We will be using a previous project as a base. So, please download that and install the dependencies if you want to follow along: Highlighting extension To implement a Vue.JS text editor with…