Laravel Jodit Laravel Package

Getting Started

1. Installation

   composer require nasirkhan/laravel-jodit
   

   Publish the config (optional but recommended for customization):

   php artisan vendor:publish --tag=jodit-config
   

2. Ensure Asset Stacks Add these to your main layout file (e.g., resources/views/layouts/app.blade.php):

   @stack('after-styles')
   @stack('after-scripts')
   

3. First Use Case Drop the component into a form in Blade:

   <x-jodit::editor name="content" :value="old('content', $post->content ?? '')" />
   

Implementation Patterns

Blade Integration

• Basic Usage: Use the component in any Blade template with the required name prop.

  <x-jodit::editor name="description" :value="$page->description" />
  

• Form Integration: Works seamlessly with Laravel forms, including validation.

  <form method="POST" action="{{ route('posts.update', $post) }}">
      @csrf
      @method('PUT')
      <x-jodit::editor name="content" :value="old('content', $post->content)" required />
      <button type="submit">Save</button>
  </form>
  

Livewire Integration

• Two-Way Binding: Sync with Livewire properties using wire-model.

  <x-jodit::editor name="body" :value="$body" wire-model="body" />
  

• Debounce: Adjust sync frequency via the debounce prop (default: 300ms).

  <x-jodit::editor name="content" wire-model="content" debounce="500" />
  

Customization

• Toolbar Buttons: Override defaults via the buttons prop (array, JSON string, or PHP-style string).

  <x-jodit::editor
      name="editor"
      :buttons="['bold', 'italic', '|', 'link', 'image']"
  />
  

• Presets: Use built-in profiles like profile="full" for a comprehensive toolbar.

  <x-jodit::editor name="content" profile="full" />
  

File Browser & Uploads

• Enable/Disable: Toggle the file browser with file-browser="false".

  <x-jodit::editor name="excerpt" file-browser="false" />
  

• Custom Connector: Override the connector URL for custom backends.

  <x-jodit::editor
      name="content"
      connector-url="{{ route('admin.jodit.connector') }}"
  />
  

Configuration

• Publish Config: Customize defaults (CDN URLs, storage, middleware, etc.).

  php artisan vendor:publish --tag=jodit-config
  

• Example Config Override:

  // config/jodit.php
  'disk' => 's3',
  'base_path' => 'uploads/jodit',
  'max_file_size' => 5120, // 5MB
  

Gotchas and Tips

Pitfalls

1. Missing Asset Stacks

   • Issue: Editor assets (CSS/JS) fail to load.
   • Fix: Ensure @stack('after-styles') and @stack('after-scripts') are in your layout.
   • Debug: Check browser console for 404 errors on Jodit CDN assets.

2. Livewire Sync Issues

   • Issue: Editor content not syncing with Livewire.
   • Fix: Ensure the wire-model prop matches a public Livewire property.
   • Debug: Verify wire:ignore is auto-applied (check component source).

3. File Upload Permissions

   • Issue: Uploads fail with 500 errors.
   • Fix: Ensure the storage disk (config/jodit.php) has write permissions.
   • Debug: Check Laravel logs for StorageException.

4. Toolbar Buttons Not Rendering

   • Issue: Custom buttons appear broken or missing.
   • Fix: Validate button names against the Buttons Reference.
   • Debug: Use profile="full" to test if the issue is button-specific.

Debugging Tips

• Inspect Network Requests: Use browser dev tools to verify:
  • Jodit CDN assets load (jodit.min.css, jodit.min.js).
  • Connector endpoint responses (e.g., GET /jodit-connector).
• Check Laravel Logs: Look for Nasirkhan\LaravelJodit entries during uploads or connector calls.
• Disable Caching: Clear config cache if changes aren’t reflected:

  php artisan config:clear
  

Extension Points

1. Custom File Manager Backend

   • Replace the built-in connector by setting 'file_manager.backend' => 'custom' in config and pointing connector-url to your endpoint.
   • Example: Integrate with spatie/laravel-medialibrary or unisharp/laravel-filemanager.

2. Middleware for Connector

   • Restrict access by adding middleware to the connector route:

     // config/jodit.php
     'route' => [
         'middleware' => ['web', 'auth', 'role:admin'],
     ],
     

3. Dynamic Config

   • Override config per request using config(['jodit.disk' => 's3']) in middleware or controllers.

4. Custom Editor Options

   • Pass additional Jodit options via the config prop (if supported in future updates):

     <x-jodit::editor
         name="content"
         :config="['toolbarButtonSize' => 'small']"
     />
     

Pro Tips

• Use profile="minimal" for lightweight editors (e.g., comments).
• Combine with Livewire Rules: Validate editor content in Livewire:

  use Illuminate\Validation\Rules\RequiredIf;
  
  public $content;
  protected $rules = [
      'content' => ['required', 'string', new RequiredIf($this->isAdmin)],
  ];
  

• Sanitize Output: Use Laravel’s strip_tags or HTML purifier (e.g., beberlei/doctrine-extensions) for stored content.
• Local Testing: Mock the connector endpoint during development:

  // routes/web.php
  Route::any('jodit-connector', fn() => response()->json([]));
  

• Performance: Disable counters if unused:

  // config/jodit.php
  'defaults' => [
      'showCharsCounter' => false,
      'showWordsCounter' => false,
  ],
  

```markdown
### **Common Anti-Patterns**
- **Hardcoding Connector URL**: Avoid hardcoding `/jodit-connector` in Blade; use `route()` helper or config.
- **Ignoring `wire:ignore`**: Manually adding `wire:ignore` to the editor’s container can break Livewire sync.
- **Overriding CDN URLs Without Testing**: Always test custom CDN paths in staging before production.
- **Skipping Validation**: Trusting user-uploaded files (e.g., PDFs) without validation can pose security risks.