https://github.com/stechstudio/laravel-tiptap
https://github.com/stechstudio/laravel-tiptap
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/stechstudio/laravel-tiptap
- Owner: stechstudio
- License: mit
- Created: 2022-10-26T14:19:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-22T08:28:30.000Z (almost 3 years ago)
- Last Synced: 2025-10-19T19:38:52.423Z (8 months ago)
- Language: Blade
- Size: 8.42 MB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
A TALL-stack implementation of the Tiptap WYSYWIG editor.
## Installation
You can install the package via composer:
```bash
composer require stechstudio/laravel-tiptap
```
The service provider will be automatically wired up for you.
### Include Javascript resources
The following packages must be installed.
Tailwind:
```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
TipTap Starter Kit:
```bash
npm install @tiptap/starter-kit
```
TipTap Extension Link:
```bash
npm install @tiptap/extension-link
```
TipTap Extension Color:
```bash
npm install @tiptap/extension-color
```
TipTap Extension Text Style:
```bash
npm install @tiptap/extension-text-style
```
You also need to have Alpine.js and the TipTap editor already installed.
Alpine.js:
```bash
npm install alpinejs
```
TipTap Core:
```bash
npm install @tiptap/core
```
In your app.js file, add the following boilerplate to get up and running.
```js
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.
## Usage
Within your Livewire component view, add the TipTap editor component and bind it to your desired Livewire property as usual:
```html
```
## Customization
The editor view may be customized by publishing the views into your application's `resources/views/vendor` folder.
```bash
php artisan vendor:publish --tag=tiptap-views
```
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.