{"id":47628371,"url":"https://github.com/nasirkhan/laravel-jodit","last_synced_at":"2026-04-01T23:01:28.356Z","repository":{"id":346152586,"uuid":"1188646366","full_name":"nasirkhan/laravel-jodit","owner":"nasirkhan","description":"The best rich text editor (WYSIWYG) for Laravel. A simple component works seamlessly in plain Blade templates, Blade view components, and Livewire components.","archived":false,"fork":false,"pushed_at":"2026-03-31T12:24:43.000Z","size":61,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-31T14:35:40.299Z","etag":null,"topics":["blade-component","file-manager","jodit","jodit-laravel","jodit-livewire","laravel-components","laravel-editor","laravel-file-manager","livewire-component","rich-text-editor","wysiwyg","wysiwyg-editor"],"latest_commit_sha":null,"homepage":"","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/nasirkhan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-22T11:42:12.000Z","updated_at":"2026-03-29T17:46:49.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/nasirkhan/laravel-jodit","commit_stats":null,"previous_names":["nasirkhan/laravel-jodit"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/nasirkhan/laravel-jodit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nasirkhan%2Flaravel-jodit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nasirkhan%2Flaravel-jodit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nasirkhan%2Flaravel-jodit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nasirkhan%2Flaravel-jodit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nasirkhan","download_url":"https://codeload.github.com/nasirkhan/laravel-jodit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nasirkhan%2Flaravel-jodit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31292781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T21:15:39.731Z","status":"ssl_error","status_checked_at":"2026-04-01T21:15:34.046Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["blade-component","file-manager","jodit","jodit-laravel","jodit-livewire","laravel-components","laravel-editor","laravel-file-manager","livewire-component","rich-text-editor","wysiwyg","wysiwyg-editor"],"created_at":"2026-04-01T23:00:38.220Z","updated_at":"2026-04-01T23:01:28.332Z","avatar_url":"https://github.com/nasirkhan.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel Jodit\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://res.cloudinary.com/dslg1fc8y/image/upload/v1774684410/laravel-jodit-editor-banner_cawmpj.jpg\" alt=\"Laravel Jodit - A WYSIWYG editor package that works seamlessly in plain Blade templates, Blade view components, and Livewire components\"\u003e\u003c/p\u003e\n\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/nasirkhan/laravel-jodit.svg?style=flat-square)](https://packagist.org/packages/nasirkhan/laravel-jodit)\n[![Total Downloads](https://img.shields.io/packagist/dt/nasirkhan/laravel-jodit.svg?style=flat-square)](https://packagist.org/packages/nasirkhan/laravel-jodit)\n[![StyleCI](https://github.styleci.io/repos/1188646366/shield?branch=main\u0026style=flat-square)](https://github.styleci.io/repos/1188646366)\n[![License](https://img.shields.io/packagist/l/nasirkhan/laravel-jodit.svg?style=flat-square)](https://packagist.org/packages/nasirkhan/laravel-jodit)\n\nA Laravel package that integrates the [Jodit](https://xdsoft.net/jodit/) WYSIWYG editor via a reusable Blade component. Works seamlessly in plain Blade templates, Blade view components, and Livewire components, with a built-in server-side file browser/uploader connector.\n\nThis package is used in [Laravel Starter](https://github.com/nasirkhan/laravel-starter) though it is framework-agnostic and can be dropped into any Laravel app.\n\nPackagist: [nasirkhan/laravel-jodit](https://packagist.org/packages/nasirkhan/laravel-jodit)  \nTags: `laravel`, `jodit`, `wysiwyg`, `editor`, `blade`, `livewire`, `rich-text`, `file-browser`\n\n---\n\n## Features\n\n- **One Blade component** — `\u003cx-jodit::editor name=\"content\" /\u003e` covers all use cases\n- **Livewire-ready** — pass `wire-model` and the editor syncs with your Livewire component\n- **File browser + uploads** — bundled connector controller; configurable storage disk and path\n- **CDN assets** — loads Jodit CSS/JS from unpkg; no build step required\n- **Fully configurable** — publish the config to override defaults, CDN URLs, middleware, etc.\n- **Flexible toolbar buttons** — supports named profiles, custom button arrays, separators, and dropdown-friendly controls like `align`\n\n## Requirements\n\n- PHP ^8.2\n- Laravel ^11.0 || ^12.0 || ^13.0\n- `intervention/image-laravel ^1.5` — only required for image **resize** and **crop** features\n\n## Installation\n\n```bash\ncomposer require nasirkhan/laravel-jodit\n```\n\nThe service provider is auto-discovered. Optionally publish the config:\n\n```bash\nphp artisan vendor:publish --tag=jodit-config\n```\n\n---\n\n## Usage\n\n### 1. Ensure your layout has asset stacks\n\nYour main layout must include the stacks that the component pushes assets into.  \nThe default stack names are `after-styles` (CSS) and `after-scripts` (JS).  \nAdd these to your layout if they are not already present:\n\n```blade\n{{-- In \u003chead\u003e --}}\n@stack('after-styles')\n\n{{-- Before \u003c/body\u003e --}}\n@stack('after-scripts')\n```\n\nYou can change the stack names in `config/jodit.php`.\n\n### 2. Drop the component into any form\n\n**Plain Blade**\n```blade\n\u003cx-jodit::editor name=\"content\" :value=\"old('content', $post-\u003econtent ?? '')\" /\u003e\n```\n\n**With required + placeholder**\n```blade\n\u003cx-jodit::editor\n    name=\"content\"\n    :value=\"old('content')\"\n    placeholder=\"Write your post here…\"\n    :required=\"true\"\n/\u003e\n```\n\n**Livewire — two-way sync**\n```blade\n\u003cx-jodit::editor name=\"content\" :value=\"$content\" wire-model=\"content\" /\u003e\n```\n\nInside a Livewire component the wrapper is automatically set to `wire:ignore` so Livewire's DOM diffing does not destroy the editor. Changes are flushed back to the Livewire component via the JavaScript API with a 300 ms debounce.\n\n**Disable file browser**\n```blade\n\u003cx-jodit::editor name=\"excerpt\" :file-browser=\"false\" /\u003e\n```\n\n**Custom height and connector URL**\n```blade\n\u003cx-jodit::editor\n    name=\"body\"\n    :height=\"600\"\n    connector-url=\"{{ route('admin.jodit.connector') }}\"\n/\u003e\n```\n\n---\n\n## Component Props\n\n| Prop | Type | Default | Description |\n|---|---|---|---|\n| `name` | string | — | `\u003ctextarea name\u003e` / form field name (required) |\n| `id` | string | `jodit_{name}` | Custom HTML id for the textarea |\n| `value` | string | `''` | Initial HTML content |\n| `placeholder` | string | `null` | Textarea placeholder |\n| `class` | string | `''` | Extra CSS classes on the textarea |\n| `height` | int | config default (400) | Editor height in pixels |\n| `file-browser` | bool | `true` | Enable Jodit file browser / uploader |\n| `connector-url` | string | auto from config | Override the connector endpoint URL |\n| `wire-model` | string | `null` | Livewire model property to keep in sync |\n| `required` | bool | `false` | Add `required` attribute to the textarea |\n| `buttons` | array\\|string | config default | Custom toolbar button list (see [Buttons Reference](#buttons-reference)) |\n| `debounce` | int | `300` | Livewire sync debounce in milliseconds |\n\n### Passing buttons\n\nYou can pass the `buttons` prop as a **PHP array** (`:buttons=`), a **JSON string**, or a **PHP-style array string**:\n\n```blade\n{{-- PHP array (recommended) --}}\n\u003cx-jodit::editor name=\"content\" :buttons=\"['bold', 'italic', 'underline', '|', 'link', 'image']\" /\u003e\n\n{{-- PHP-style array string (no colon prefix needed) --}}\n\u003cx-jodit::editor name=\"content\" buttons=\"['bold', 'italic', 'underline', '|', 'link', 'image']\" /\u003e\n\n{{-- JSON string --}}\n\u003cx-jodit::editor name=\"content\" buttons='[\"bold\", \"italic\", \"underline\", \"|\", \"link\", \"image\"]' /\u003e\n```\n\n### Common toolbar examples\n\nUse `align` when you want a single alignment dropdown instead of separate `left`, `center`, `right`, and `justify` buttons:\n\n```blade\n\u003cx-jodit::editor\n    name=\"content\"\n    :buttons=\"['bold', 'italic', '|', 'align', '|', 'ul', 'ol', '|', 'link', 'image']\"\n/\u003e\n```\n\nUse the package's richer preset when you want the full toolbar profile:\n\n```blade\n\u003cx-jodit::editor name=\"content\" profile=\"full\" /\u003e\n```\n\n---\n\n## Configuration\n\n```php\n// config/jodit.php (after publishing)\n\nreturn [\n    // Jodit CDN URLs — change the version or point to a custom build\n    'cdn_css' =\u003e 'https://unpkg.com/jodit@4.1.16/es2021/jodit.min.css',\n    'cdn_js'  =\u003e 'https://unpkg.com/jodit@4.1.16/es2021/jodit.min.js',\n\n    // Asset stacks used by the Blade component\n    'assets' =\u003e [\n        'styles_stack'  =\u003e 'after-styles',\n        'scripts_stack' =\u003e 'after-scripts',\n    ],\n\n    // Connector route settings\n    'route' =\u003e [\n        'enabled'    =\u003e true,\n        'prefix'     =\u003e 'jodit',\n        'name'       =\u003e 'jodit.connector',\n        'middleware' =\u003e ['web', 'auth'],\n    ],\n\n    // Storage\n    'disk'      =\u003e 'public',\n    'base_path' =\u003e 'jodit',\n\n    // Upload constraints\n    'max_file_size'  =\u003e 10240,   // kilobytes\n    'allowed_mimes'  =\u003e 'jpeg,jpg,png,gif,webp,svg,pdf,doc,docx,xls,xlsx,zip,txt',\n\n    // Default editor options (passed directly to Jodit)\n    'defaults' =\u003e [\n        'height'               =\u003e 400,\n        'toolbarSticky'        =\u003e true,\n        'toolbarButtonSize'    =\u003e 'large',\n        'showCharsCounter'     =\u003e false,\n        'showWordsCounter'     =\u003e false,\n        'showXPathInStatusbar' =\u003e false,\n        'defaultActionOnPaste' =\u003e 'insert_clear_html',\n    ],\n\n    // Default toolbar buttons\n    'buttons' =\u003e [\n        'bold', 'italic', 'underline', 'strikethrough', '|',\n        'left', 'center', 'right', '|',\n        'ul', 'ol', '|',\n        'font', 'fontsize', 'paragraph', 'brush', '|',\n        'link', 'image', 'video', 'file', '|',\n        'undo', 'redo',\n    ],\n];\n```\n\n### Registering the connector under a custom route\n\nIf you want the connector to live under your admin prefix with your own middleware, disable the package route and register it yourself:\n\n```php\n// config/jodit.php\n'route' =\u003e [\n    'enabled' =\u003e false,\n],\n```\n\n```php\n// routes/web.php\nuse Nasirkhan\\LaravelJodit\\Http\\Controllers\\JoditConnectorController;\n\nRoute::middleware(['web', 'auth', 'role:admin'])\n    -\u003eprefix('admin')\n    -\u003egroup(function () {\n        Route::any('jodit-connector', [JoditConnectorController::class, 'handle'])\n            -\u003ename('backend.jodit.connector');\n    });\n```\n\nThen tell the component which route to use:\n\n```blade\n\u003cx-jodit::editor\n    name=\"content\"\n    connector-url=\"{{ route('backend.jodit.connector') }}\"\n/\u003e\n```\n\nOr set a global default in `config/jodit.php`:\n\n```php\n'route' =\u003e [\n    'enabled' =\u003e false,\n    'name'    =\u003e 'backend.jodit.connector',  // used by component when no connector-url prop\n],\n```\n\n---\n\n## Buttons Reference\n\nUse any of the names below in your `buttons` array. Use `|` as a visual separator between groups.\n\n### Text Formatting\n\n| Name | Description |\n|---|---|\n| `bold` | Bold |\n| `italic` | Italic |\n| `underline` | Underline |\n| `strikethrough` | Strikethrough |\n| `superscript` | Superscript |\n| `subscript` | Subscript |\n| `eraser` | Clear formatting |\n\n### Alignment\n\n| Name | Description |\n|---|---|\n| `align` | Alignment dropdown (`left`, `center`, `right`, `justify`) |\n| `left` | Align left |\n| `center` | Align centre |\n| `right` | Align right |\n| `justify` | Justify |\n\n### Lists \u0026 Indentation\n\n| Name | Description |\n|---|---|\n| `ul` | Unordered list |\n| `ol` | Ordered list |\n| `indent` | Increase indent |\n| `outdent` | Decrease indent |\n\n### Block / Typography\n\n| Name | Description |\n|---|---|\n| `paragraph` | Paragraph / Headings (H1–H6) |\n| `font` | Font family |\n| `fontsize` | Font size |\n| `brush` | Text colour \u0026 background colour |\n| `classSpan` | Apply CSS class to selection |\n\n### Insert\n\n| Name | Description |\n|---|---|\n| `link` | Insert / edit hyperlink |\n| `image` | Insert image |\n| `video` | Insert video (embed) |\n| `file` | Insert file link |\n| `table` | Insert table |\n| `hr` | Horizontal rule |\n| `symbols` | Special characters |\n\n### Clipboard \u0026 History\n\n| Name | Description |\n|---|---|\n| `undo` | Undo |\n| `redo` | Redo |\n| `cut` | Cut |\n| `copy` | Copy |\n| `paste` | Paste |\n| `selectall` | Select all |\n\n### View / Utility\n\n| Name | Description |\n|---|---|\n| `source` | Toggle HTML source view |\n| `fullsize` | Toggle fullscreen |\n| `preview` | Live preview |\n| `print` | Print |\n| `find` | Find \u0026 replace |\n| `spellcheck` | Spell check |\n| `speech` | Speech recognition |\n\n### Separators\n\n| Name | Description |\n|---|---|\n| `\\|` | Vertical separator bar |\n| `\\n` | Line break (start a new toolbar row) |\n\n**Example — compact toolbar:**\n\n```php\n'buttons' =\u003e [\n    'bold', 'italic', 'underline', 'strikethrough', 'eraser', '|',\n    'ul', 'ol', '|',\n    'paragraph', 'brush', '|',\n    'link', 'image', '|',\n    'undo', 'redo',\n],\n```\n\n**Example — full editing toolbar:**\n\n```php\n'buttons' =\u003e [\n    'source', '|',\n    'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'eraser', '|',\n    'paragraph', 'font', 'fontsize', 'brush', 'classSpan', '|',\n    'align', '|',\n    'ul', 'ol', 'indent', 'outdent', '|',\n    'cut', 'copy', 'paste', 'selectall', '|',\n    'link', 'image', 'video', 'file', 'table', 'hr', 'symbols', '|',\n    'undo', 'redo', '|',\n    'find', 'spellcheck', 'speech', 'preview', 'print', 'fullsize',\n],\n```\n\n---\n\n## File Manager Backends\n\nThe `file_manager.backend` config key controls which file manager is wired up when `file-browser=\"true\"` (the default).\n\n### `builtin` (default)\n\nUses the package's own connector controller. No extra packages required.\n\n```php\n// config/jodit.php\n'file_manager' =\u003e [\n    'backend' =\u003e 'builtin',\n],\n```\n\n### `custom`\n\nPoint the editor at any server-side connector that speaks Jodit's filebrowser protocol. Pass the URL via the component's `connector-url` prop, or set `route.name` in the config:\n\n```blade\n\u003cx-jodit::editor\n    name=\"content\"\n    connector-url=\"{{ route('my.connector') }}\"\n/\u003e\n```\n\n---\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnasirkhan%2Flaravel-jodit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnasirkhan%2Flaravel-jodit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnasirkhan%2Flaravel-jodit/lists"}