Implementing Tiptap Rich Text Editor in ReactJS Project

Channel:

Geeky Shows

Subscribers:

543,000

Published on December 13, 2023 8:21:25 AM ● Video Link: https://www.youtube.com/watch?v=zrde4KwisUM

Category:

Tutorial

Duration: 48:35

1,208 views

64

Implementing Tiptap Rich Text Editor in ReactJS Project
Ready to take your text editing to the next level? In this tutorial video, I guide you through integrating Tiptap, a powerful WYSIWYG editor, into your ReactJS project. From installation to customizing features, discover how to enhance your content creation experience with ease. Empower your users with a seamless and intuitive text editing solution!

Core Javascript https://www.youtube.com/playlist?list=PLbGui_ZYuhiiaQjuOfvgx_-gzVBlCxrk0

Advance Javascript https://www.youtube.com/playlist?list=PLbGui_ZYuhihZ-pDxNZuQ7xOQ8IS2z3XI

Ajax https://www.youtube.com/playlist?list=PLbGui_ZYuhihUYNCkpedtfgpYXv9tHVsp

ReactJS https://youtu.be/jhryZ6ChLqY

NodeJS Express JS Mongo DB https://www.youtube.com/playlist?list=PLbGui_ZYuhijy1SpwtIS9IwL6OJdbr4kE

Core Python https://www.youtube.com/playlist?list=PLbGui_ZYuhigZkqrHbI_ZkPBrIr5Rsd5L

Advance Python https://www.youtube.com/playlist?list=PLbGui_ZYuhijd1hUF2VWiKt8FHNBa7kGb

Django https://www.youtube.com/playlist?list=PLbGui_ZYuhigchy8DTw4pX4duTTpvqlh6

Django REST Framework https://www.youtube.com/playlist?list=PLbGui_ZYuhijTKyrlu-0g5GcP9nUp_HlN

Django Testing https://www.youtube.com/playlist?list=PLbGui_ZYuhiixCQ8tFnq4RYAsdUVd933w

Django Celery https://www.youtube.com/playlist?list=PLbGui_ZYuhijN6wEQZ0DC-V5EdK4YMrYO

Django Channels https://www.youtube.com/playlist?list=PLbGui_ZYuhij6LpUbWgKUxggL_AuoHHVw

Core PHP https://www.youtube.com/playlist?list=PLbGui_ZYuhigFdLdbSI2EM2MrJB7I0j-B

Advance PHP https://www.youtube.com/playlist?list=PLbGui_ZYuhiiaWMoOK7LXB0GeLsYCiyz5

Laravel https://www.youtube.com/playlist?list=PLbGui_ZYuhijEqjCa63l0GkWh5EsG5iTR

Vue 3 https://www.youtube.com/playlist?list=PLbGui_ZYuhih5ItBhn2cTncaS24_Kgeui

Nuxt 3 https://www.youtube.com/playlist?list=PLbGui_ZYuhihr7r33VW4RykfezZcsnFjM

Git and Github https://www.youtube.com/playlist?list=PLbGui_ZYuhigWA1mNWzwErSBIZvgOJbNc

Supabase Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhii-VpaYcjaC2jZ7qI-7xLXR

Shadcn UI Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhijXbrypMtp2qrTLBVRwjABQ

Redis Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhijTJDBVBBqvri76uUNfsrCc

Docker Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhihMb5pqut64GhW-WhxKpygY

Kotlin https://www.youtube.com/playlist?list=PLbGui_ZYuhigEr9Yc4jJe0vHTU-gZTRTq

VPS Hosting Basic to Advance https://www.youtube.com/playlist?list=PLbGui_ZYuhij0mM8xP2udM_EDvl8JNdtn

Shared Hosting with cPanel https://www.youtube.com/playlist?list=PLbGui_ZYuhih1aRFfUu6IBOWlKSkdBg0R

Shared Hosting with hPanel https://www.youtube.com/playlist?list=PLbGui_ZYuhigqwKz6LvBmYNV0tVW-CzIP

Official Website:- https://geekyshows.com
LinkedIn: https://www.linkedin.com/in/irenicraj
Instagram: https://www.instagram.com/geekyshow1
Twitter: https://twitter.com/irenicraj

00:00 Introduction
01:40 Project Demo
04:55 Create Project
05:42 Edit Default Template
06:25 Run Project
06:35 NewPost Component
07:28 Install Tiptap
10:27 TipTap Editor Component
21:13 Use Extension in Tiptap
24:23 Get Editor Data
30:54 Display Editor Content on Page or Component
33:03 Install html-react-parser
34:33 How to saving Editor Data in Database
35:12 Using Tailwind in Tiptap
37:57 Customizing Tiptap Menu
40:46 Fix Format issue
45:33 Your Task