A powerful Livewire rich text editor (WYSIWYG) component that build top of Jodit Editor.

To use this package, you must have Livewire 3 installed.

Seconds install this package via Composer:

composer require mantix/livewire-jodit-text-editor

Include the Jodit Editor theme and the library in your layout or specific view.

<!-- Include Jodit CSS Styling -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/4.1.16/jodit.min.css">

<!-- Include the Jodit JS Library -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/4.1.16/jodit.min.js"></script>

Or you can use NPM to install the Jodit Editor directly in your project:

npm install jodit

Import it in your app.js like:

// 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 like:

// Jodit Editor
@import 'jodit/es2021/jodit';

For additional information, kindly refer to the Jodit Editor documentation.

Now you can use the text editor component as you like.

<livewire:jodit-text-editor wire:model.live="content" />

The text editor component is entirely customizable. Just publish the view file and make it your own.

php artisan vendor:publish --tag=livewire-jodit-text-editor-views

Please see CHANGELOG for more information on what has changed recently.

Please see CONTRIBUTING for details.

Is this plugin helpful to you? Let me know by connecting on LinkedIn or on X.