How To Add Rich Text Editor in NuxtJS

Why we need a rich text editor

1 Rd9Xz07fKvCvJipdhFiJUQ.png

Let’s assume a scenario where we want, our user can enter their experience with our product, and then we will show that on our website. here we can get user experience in normal text area but when we will show it on our website it looks simple but if we use a rich-text editor, user can use multiple text formatting options and write a proper blog of his experience and of course, it’s easy to read for others. I have been using this package on other apps i have developed.

Installation

npm install --save tiptap-vuetify

Changes in Nuxt.config.js

plugins: [~/plugins/TiptapVuetify],
build: {transpile: ['vuetify/lib', "tiptap-vuetify"]}

Now Create a Component

Let’s create a component called Editor.vue and paste the below code in it. Here we can import the different features of the editor which are necessary and disable the features which are not necessary.

Code: https://github.com/pretended/rich-text-editor

Thanks for reading, i have always think that one shouldn't reinvent the wheel and first try to search the packages he is thinking to create on the internet. You might be impressed of the amount of content in node package manager :).

H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now