https://github.com/mantix/livewire-jodit-text-editor
A powerful Livewire rich text editor (WYSIWYG) component built top of Jodit Editor.
https://github.com/mantix/livewire-jodit-text-editor
jodit jodit-livewire laravel laravel10 laravel11 livewire livewire3 wysiwyg wysiwyg-editor wysiwyg-html-editor
Last synced: 5 days ago
JSON representation
A powerful Livewire rich text editor (WYSIWYG) component built top of Jodit Editor.
- Host: GitHub
- URL: https://github.com/mantix/livewire-jodit-text-editor
- Owner: Mantix
- License: mit
- Created: 2024-04-16T10:01:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-29T07:23:15.000Z (about 1 year ago)
- Last Synced: 2024-10-11T11:24:06.231Z (about 1 year ago)
- Topics: jodit, jodit-livewire, laravel, laravel10, laravel11, livewire, livewire3, wysiwyg, wysiwyg-editor, wysiwyg-html-editor
- Language: PHP
- Homepage: https://mantix.nl
- Size: 82 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
Livewire Jodit Text Editor (WYSIWYG)
## 📋 Table of Contents
- [Introduction](#-introduction)
- [Installation](#-installation)
- [Basic Usage](#-basic-usage)
- [Advanced Features](#-advanced-features)
- [Customizing Toolbar Buttons](#customizing-toolbar-buttons)
- [Using Multiple Editors](#using-multiple-editors)
- [Programmatically Updating Content](#programmatically-updating-content)
- [Customization](#-customization)
- [Changelog](#-changelog)
- [Contributing](#-contributing)
- [Support](#-support)
## ✨ Introduction
A powerful Livewire rich text editor (WYSIWYG) component built on top of Jodit Editor, providing seamless integration with Laravel Livewire.
> To use this package, you must have [Livewire 3](https://livewire.laravel.com/) installed.
## 📦 Installation
Install this package via Composer:
```bash
composer require mantix/livewire-jodit-text-editor
```
Include the Jodit Editor theme and the library in your layout or specific view:
```html
```
Or use NPM to install the Jodit Editor directly in your project:
```bash
npm install jodit
```
Import it in your app.js like:
```javascript
// Jodit Editor
import 'jodit/esm/plugins/resizer/resizer'; // Resizer plugin is used when inserting images
import 'jodit/esm/plugins/video/video'; // Video plugin is used to insert videos
// Feel free to add extra plugins here...
import { Jodit } from 'jodit';
window.Jodit = Jodit;
```
And in your app.scss:
```scss
// Jodit Editor
@import 'jodit/es2021/jodit';
```
For additional information, refer to the [Jodit Editor documentation](https://xdsoft.net/jodit/docs/).
## 🎬 Basic Usage
The simplest way to use the editor:
```html
```
## 🚀 Advanced Features
### Customizing Toolbar Buttons
You can customize the toolbar buttons by passing an array:
```html
```
### Using Multiple Editors
When using multiple editors on the same page, you can assign unique identifiers to target them individually:
```html
```
### Programmatically Updating Content
You can update editor content programmatically using Livewire's dispatch method:
#### Update all editors on the page:
```php
// This will update all Jodit editors on the page
$this->dispatch('update-jodit-content', $newContent);
```
#### Update a specific editor:
```php
// This will only update the editor with the specified identifier
$this->dispatch('update-jodit-content', ['description-editor', $newContent]);
```
## 🎨 Customization
The text editor component is entirely customizable. Publish the view file to customize it:
```bash
php artisan vendor:publish --tag=livewire-jodit-text-editor-views
```
After publishing, you can edit the view at `resources/views/vendor/livewire-jodit-text-editor/livewire/jodit-text-editor.blade.php`.
## 🔄 Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## 🤝 Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
## ❤️ Support
Is this plugin helpful to you? Let me know by connecting on LinkedIn or on X.