{"id":14975094,"url":"https://github.com/mantix/livewire-jodit-text-editor","last_synced_at":"2026-01-06T12:10:57.350Z","repository":{"id":233499835,"uuid":"787324281","full_name":"Mantix/livewire-jodit-text-editor","owner":"Mantix","description":"A powerful Livewire rich text editor (WYSIWYG) component built top of Jodit Editor.","archived":false,"fork":false,"pushed_at":"2024-09-29T07:23:15.000Z","size":84,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-11T11:24:06.231Z","etag":null,"topics":["jodit","jodit-livewire","laravel","laravel10","laravel11","livewire","livewire3","wysiwyg","wysiwyg-editor","wysiwyg-html-editor"],"latest_commit_sha":null,"homepage":"https://mantix.nl","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mantix.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-16T10:01:52.000Z","updated_at":"2024-09-29T07:23:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"5deb66d0-b1a0-4449-883f-2e17949e5d33","html_url":"https://github.com/Mantix/livewire-jodit-text-editor","commit_stats":{"total_commits":10,"total_committers":2,"mean_commits":5.0,"dds":0.4,"last_synced_commit":"36ec98b9335cf2a9caa54078d67b3263123fc648"},"previous_names":["mantix/livewire-jodit-text-editor"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mantix%2Flivewire-jodit-text-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mantix%2Flivewire-jodit-text-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mantix%2Flivewire-jodit-text-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mantix%2Flivewire-jodit-text-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mantix","download_url":"https://codeload.github.com/Mantix/livewire-jodit-text-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219861467,"owners_count":16555994,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jodit","jodit-livewire","laravel","laravel10","laravel11","livewire","livewire3","wysiwyg","wysiwyg-editor","wysiwyg-html-editor"],"created_at":"2024-09-24T13:51:30.368Z","updated_at":"2025-10-27T10:32:18.290Z","avatar_url":"https://github.com/Mantix.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eLivewire Jodit Text Editor (WYSIWYG)\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/mantix/livewire-jodit-text-editor/actions\"\u003e\u003cimg src=\"https://github.com/mantix/livewire-jodit-text-editor/actions/workflows/tests.yml/badge.svg\" alt=\"Build Status\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/mantix/livewire-jodit-text-editor\"\u003e\u003cimg src=\"https://img.shields.io/packagist/dt/mantix/livewire-jodit-text-editor\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/mantix/livewire-jodit-text-editor\"\u003e\u003cimg src=\"https://img.shields.io/packagist/v/mantix/livewire-jodit-text-editor\" alt=\"Latest Stable Version\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://packagist.org/packages/mantix/livewire-jodit-text-editor\"\u003e\u003cimg src=\"https://img.shields.io/packagist/l/mantix/livewire-jodit-text-editor\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## 📋 Table of Contents\n- [Introduction](#-introduction)\n- [Installation](#-installation)\n- [Basic Usage](#-basic-usage)\n- [Advanced Features](#-advanced-features)\n  - [Customizing Toolbar Buttons](#customizing-toolbar-buttons)\n  - [Using Multiple Editors](#using-multiple-editors)\n  - [Programmatically Updating Content](#programmatically-updating-content)\n- [Customization](#-customization)\n- [Changelog](#-changelog)\n- [Contributing](#-contributing)\n- [Support](#-support)\n\n## ✨ Introduction\nA powerful Livewire rich text editor (WYSIWYG) component built on top of Jodit Editor, providing seamless integration with Laravel Livewire.\n\n\u003e To use this package, you must have [Livewire 3](https://livewire.laravel.com/) installed.\n\n## 📦 Installation\nInstall this package via Composer:\n```bash\ncomposer require mantix/livewire-jodit-text-editor\n```\n\nInclude the Jodit Editor theme and the library in your layout or specific view:\n```html\n\u003c!-- Include Jodit CSS Styling --\u003e\n\u003clink rel=\"stylesheet\" href=\"//unpkg.com/jodit@4.1.16/es2021/jodit.min.css\"\u003e\n\n\u003c!-- Include the Jodit JS Library --\u003e\n\u003cscript src=\"//unpkg.com/jodit@4.1.16/es2021/jodit.min.js\"\u003e\u003c/script\u003e\n```\n\nOr use NPM to install the Jodit Editor directly in your project:\n```bash\nnpm install jodit\n```\n\nImport it in your app.js like:\n```javascript\n// Jodit Editor\nimport 'jodit/esm/plugins/resizer/resizer'; // Resizer plugin is used when inserting images\nimport 'jodit/esm/plugins/video/video'; // Video plugin is used to insert videos\n// Feel free to add extra plugins here...\nimport { Jodit } from 'jodit';\nwindow.Jodit = Jodit;\n```\n\nAnd in your app.scss:\n```scss\n// Jodit Editor\n@import 'jodit/es2021/jodit';\n```\n\nFor additional information, refer to the [Jodit Editor documentation](https://xdsoft.net/jodit/docs/).\n\n## 🎬 Basic Usage\nThe simplest way to use the editor:\n```html\n\u003clivewire:jodit-text-editor wire:model.live=\"content\" /\u003e\n```\n\n## 🚀 Advanced Features\n\n### Customizing Toolbar Buttons\nYou can customize the toolbar buttons by passing an array:\n```html\n\u003clivewire:jodit-text-editor \n    wire:model.live=\"content\" \n    :buttons=\"['bold', 'italic', 'underline', 'strikeThrough', '|', 'left', 'center', 'right', '|', 'link', 'image']\" \n/\u003e\n```\n\n### Using Multiple Editors\nWhen using multiple editors on the same page, you can assign unique identifiers to target them individually:\n\n```html\n\u003clivewire:jodit-text-editor \n    wire:model.live=\"description\" \n    identifier=\"description-editor\" \n/\u003e\n\n\u003clivewire:jodit-text-editor \n    wire:model.live=\"content\" \n    identifier=\"content-editor\" \n/\u003e\n```\n\n### Programmatically Updating Content\nYou can update editor content programmatically using Livewire's dispatch method:\n\n#### Update all editors on the page:\n```php\n// This will update all Jodit editors on the page\n$this-\u003edispatch('update-jodit-content', $newContent);\n```\n\n#### Update a specific editor:\n```php\n// This will only update the editor with the specified identifier\n$this-\u003edispatch('update-jodit-content', ['description-editor', $newContent]);\n```\n\n## 🎨 Customization\nThe text editor component is entirely customizable. Publish the view file to customize it:\n```bash\nphp artisan vendor:publish --tag=livewire-jodit-text-editor-views\n```\n\nAfter publishing, you can edit the view at `resources/views/vendor/livewire-jodit-text-editor/livewire/jodit-text-editor.blade.php`.\n\n## 🔄 Changelog\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## 🤝 Contributing\nPlease see [CONTRIBUTING](CONTRIBUTING.md) for details.\n\n## ❤️ Support\nIs this plugin helpful to you? Let me know by connecting \u003ca href='https://linkedin.com/in/pieternaber' target='_blank'\u003eon LinkedIn\u003c/a\u003e or \u003ca href='https://x.com/pieternaber' target='_blank'\u003eon X\u003c/a\u003e.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantix%2Flivewire-jodit-text-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmantix%2Flivewire-jodit-text-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantix%2Flivewire-jodit-text-editor/lists"}