Image for post
Image for post
Photo by @dylandgillis from Unsplash

A month ago, I wrote a small tutorial introducing tiptap collaborative Editor. Since then, I have made two packages out of it. Though it is not mandatory to read it first, it will help you understand how those packages work under the hood.

The goal of this article is to show you how to use both of those packages together to add a nicely featured collaborative rich text editor to your VueJS application.

Also available in french

The ProseMirror socket server

To synchronize many editors, each of them must connect to a socket server. The server will collect modifications made on each editor and dispatch them to every other editor. …


Form Input Elements and v-model in VueJS slots
Form Input Elements and v-model in VueJS slots
Picture from Kelly Sikkema on Unsplash

In this article, I’ll share with you the solutions I’ve found to a small issue I’ve encountered: using form input elements and the v-model attribute, in scoped slots.

Also available in french

Scoped slots and v-model

VueJS provides a pretty useful feature to make your code DRY ( Don’t repeat yourself): slots. If you are not aware of what slots are, I’ll give you an example. Dialog box is a good one. A dialog box always behaves the same way. When you open it, it creates a view appearing above the current view. This new view usually has a title, content, and some buttons. And the content could be anything! Some raw text, a form, a picture, a combination of those things, some other things… In this case, would you develop a new dialog box for each sort of content? …


Image for post
Image for post

In this article, I’m going to take you on an adventure with me. Let’s implement the real-time collaborative text editor using tiptap and our own socket.io server.

Also available in french

Tiptap is a renderless rich-text editor for Vue.js. Renderless means the developer has full control over markup and styling. It is based on ProseMirror, which is a toolkit for building rich-text editors that are already in use at many well-known companies such as Atlassian or New York Times.

Tiptap provides a simple but limited example of collaborative editing. For starters, it allows to only edit a single document. Naept, the application I’m currently developing, handles a lot of elements containing rich-text sections. Up to now, updating those elements was made using dialog boxes, and sending update requests to the back-end. It works well, but it’s not user-friendly. I want to enhance the collaborative aspect of naept by providing collaborative text edition for every rich-text area of the UI. …

About

Julien Aupart

CTO and Full-stack developer @ Naept

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store