Tiptap is a modern, headless WYSIWYG editor that can be easily integrated into your web applications. It has support for modern JavaScript frameworks like React, Vue, and Svelte and offers a ton of functionality via its plugin/extension system.
In this video, we’ll look at using Tiptap with an Inertia app using Vue 3, Tailwind, and Laravel. We’ll cover installation, styling with Tailwind CSS and the typography plugin, using v-model, persisting content to the backend, and protecting from cross-site scripting attacks using the Laravel Purify package.
GitHub Example Repo: https://github.com/drehimself/tiptap-inertia-vue-example
00:00 Introduction
01:26 Installation
05:46 Customize Editor with Tailwind classes
08:26 Add buttons
16:21 Style tags with Tailwind typography plugin
22:14 Add icons for buttons
25:40 Using v-model and extracting to component
40:18 Persisting to the backend
51:13 Protecting against cross-site scripting attacks
# LINKS
My courses: https://codewithdre.com
Sign up for my newsletter: http://andremadarang.com/newsletter
My website: http://andremadarang.com
Twitter: http://twitter.com/drehimself
GitHub: http://github.com/drehimself
CodePen: http://codepen.io/drehimself