Laravel Jodit Laravel Package

Getting Started

Minimal Setup

1. Install the package:

   composer require nasirkhan/laravel-jodit
   

2. Ensure asset stacks exist in your layout:

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

3. Use the component in a form:

   <x-jodit::editor name="content" :value="$post->content" />
   

First Use Case: Basic Livewire Integration

For a Livewire component, sync the editor with a property:

<x-jodit::editor name="description" wire-model="description" />

The editor will automatically debounce updates (default: 300ms) to avoid excessive Livewire syncs.

Implementation Patterns

Blade Integration

• Plain Blade Forms: Use the component with name and value props:

  <x-jodit::editor name="bio" :value="old('bio', $user->bio)" />
  

• Conditional File Browser: Disable for non-rich-text fields:

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

Livewire Workflow

1. Two-Way Binding: Sync with Livewire properties:

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

2. Custom Debounce: Adjust sync frequency:

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

Custom Toolbars

• Presets: Use built-in profiles:

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

• Custom Arrays: Define buttons programmatically:

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

File Management

• Connector Route: Override the default route:

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

• Storage Config: Publish and modify config/jodit.php:

  'disk' => 's3',
  'base_path' => 'uploads/jodit',
  

Gotchas and Tips

Debugging

• Missing Assets: Verify @stack('after-styles') and @stack('after-scripts') exist in your layout.
• Livewire Sync Issues: Check for JavaScript errors in browser console. Ensure wire:ignore is auto-applied (it is by default).
• File Upload Failures: Validate storage/disk and base_path in config. Ensure the directory exists:

  php artisan storage:link
  

Configuration Quirks

• CDN Caching: Clear browser cache if Jodit assets fail to load. Override CDN URLs in config if needed:

  'cdn_css' => 'https://your-cdn/jodit.min.css',
  

• Middleware Conflicts: Disable the package route if using a custom connector:

  'route' => ['enabled' => false],
  

  Then register your own route in routes/web.php.

Extension Points

• Custom Backends: Implement a custom file manager by extending Nasirkhan\LaravelJodit\Http\Controllers\JoditConnectorController.
• Toolbar Extensions: Add custom buttons by extending Jodit’s core API (see Jodit Docs).
• Livewire Events: Listen for editor changes via Livewire hooks:

  protected $listeners = ['jodit:updated' => 'handleEditorUpdate'];
  

Performance Tips

• Debounce Tuning: Increase debounce for large editors to reduce sync overhead.
• Lazy Loading: Load Jodit assets dynamically if not needed on every page:

  @push('after-scripts')
      @if(request()->routeIs('editor-page'))
          <script src="https://unpkg.com/jodit@4.1.16/es2021/jodit.min.js"></script>
      @endif
  @endpush
  

Common Pitfalls

• CSRF Token Mismatch: Ensure the connector route includes web middleware (default in config).
• File Size Limits: Adjust max_file_size in config if uploads fail:

  'max_file_size' => 5120, // 5MB
  

• Livewire Property Conflicts: Avoid naming Livewire properties the same as Jodit’s internal props (e.g., height).

Pro Tips

• Preserve Formatting: Use defaultActionOnPaste: 'insert_clear_html' in config to sanitize pasted content.
• Dark Mode: Customize Jodit’s theme via CSS:

  .jodit-wrapper {
      --jodit-bg-color: #2d3748;
      --jodit-text-color: #e2e8f0;
  }
  

• Image Optimization: Require intervention/image-laravel for resize/crop features:

  composer require intervention/image-laravel
  

  Then configure in config/jodit.php:

  'image_driver' => 'gd', // or 'imagick'
  

```markdown
---