A TALL-stack implementation of the Tiptap WYSYWIG editor.
You can install the package via composer:
composer require stechstudio/laravel-tiptapThe service provider will be automatically wired up for you.
The following packages must be installed.
Tailwind:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -pTipTap Starter Kit:
npm install @tiptap/starter-kitTipTap Extension Link:
npm install @tiptap/extension-linkTipTap Extension Color:
npm install @tiptap/extension-colorTipTap Extension Text Style:
npm install @tiptap/extension-text-styleYou also need to have Alpine.js and the TipTap editor already installed.
Alpine.js:
npm install alpinejsTipTap Core:
npm install @tiptap/coreIn your app.js file, add the following boilerplate to get up and running.
import { Editor } from "@tiptap/core";
import StarterKit from "@tiptap/starter-kit";
import Link from "@tiptap/extension-link";
import TextStyle from "@tiptap/extension-text-style";
import Color from "@tiptap/extension-color";
import Alpine from 'alpinejs';
window.Editor = Editor;
window.StarterKit = StarterKit;
window.Link = Link;
window.TextStyle = TextStyle;
window.Color = Color;
window.Alpine = Alpine;
Alpine.start();This will make use of the previously mentioned packages.
Within your Livewire component view, add the TipTap editor component and bind it to your desired Livewire property as usual:
<x-tiptap::editor wire:model="message.body" id="body" name="body" />The editor view may be customized by publishing the views into your application's resources/views/vendor folder.
php artisan vendor:publish --tag=tiptap-viewsThe MIT License (MIT). Please see License File for more information.