Livewire Jodit Text Editor Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require mantix/livewire-jodit-text-editor
   

   Publish the config (optional):

   php artisan vendor:publish --provider="Mantix\LivewireJoditTextEditor\LivewireJoditTextEditorServiceProvider" --tag="config"
   

2. First Use Case Add the component to a Livewire blade:

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

   Define the property in your Livewire component:

   public $content = '<p>Default content</p>';
   

3. Where to Look First

   • Basic Usage in the README for quick integration.
   • config/livewire-jodit-text-editor.php for default settings (e.g., toolbar buttons, upload paths).
   • Advanced Features for customization.

Implementation Patterns

Core Workflow

1. Model Binding Bind the editor to a Livewire property (e.g., wire:model="post.body"). Changes sync automatically via Livewire’s reactivity.

2. Validation Validate the output in your Livewire component:

   protected $rules = [
       'content' => 'required|string',
   ];
   

3. Form Submission Use the bound property in form submissions:

   <form wire:submit="save">
       <livewire:jodit-editor wire:model="content" />
       <button type="submit">Save</button>
   </form>
   

Integration Tips

• Dynamic Toolbars Pass a custom toolbar config via wire:model or props:

  <livewire:jodit-editor
      wire:model="content"
      :toolbar="['bold', 'italic', 'image']"
  />
  

• Multiple Editors Use unique keys for each editor:

  <livewire:jodit-editor wire:model="intro" key="intro-editor" />
  <livewire:jodit-editor wire:model="conclusion" key="conclusion-editor" />
  

• Server-Side Processing Sanitize HTML on submission (e.g., with Purifier):

  use Purifier;
  $cleanContent = Purifier::clean($this->content);
  

• Livewire Hooks Trigger actions on editor events (e.g., init, change):

  public function mount() {
      $this->dispatch('editor-initialized');
  }
  

Gotchas and Tips

Common Pitfalls

1. CORS for Uploads If using file uploads, ensure your storage endpoint (e.g., /api/upload) is CORS-enabled. Configure the upload URL in the editor:

   <livewire:jodit-editor
       wire:model="content"
       upload-url="/api/upload"
   />
   

2. HTML Sanitization Jodit outputs raw HTML. Always sanitize before saving to the database to prevent XSS:

   $this->content = strip_tags($this->content, '<p><strong><em><a>');
   

3. Livewire Property Conflicts Avoid naming bound properties the same as Jodit’s internal props (e.g., config, events). Prefix with editor_ if needed:

   public $editor_content;
   

4. Toolbar Button IDs Use Jodit’s official button IDs (e.g., bold, image, source). Custom buttons require JavaScript overrides.

Debugging Tips

• Console Logs Enable Jodit’s debug mode via config:

  'debug' => env('APP_DEBUG', false),
  

  Check browser console for errors (e.g., failed uploads, missing assets).

• Asset Loading Ensure Jodit’s CSS/JS are loaded. If using Laravel Mix/Vite, add:

  import 'jodit/build/jodit.min.css';
  import 'jodit/build/jodit.min.js';
  

• Livewire Events Listen for editor events in Livewire:

  protected $listeners = ['editorChange' => 'handleEditorChange'];
  
  public function handleEditorChange($content) {
      $this->content = $content;
  }
  

Extension Points

1. Custom Plugins Extend Jodit’s functionality by registering custom plugins in the config:

   'plugins' => [
       'customPlugin' => [
           'path' => 'vendor/custom-plugin/dist/plugin.js',
           'init' => 'initCustomPlugin',
       ],
   ],
   

2. Override Default Config Merge custom settings in boot():

   public function boot() {
       $this->callHook('beforeRender', function () {
           $this->joditConfig = array_merge($this->joditConfig, [
               'buttons' => ['strike', 'undo'],
           ]);
       });
   }
   

3. File Upload Handling Create a custom upload handler (e.g., for S3):

   public function uploadHandler($request) {
       $file = $request->file('file');
       $path = $file->store('jodit-uploads', 'public');
       return response()->json(['location' => asset("storage/{$path}")]);
   }
   

   Route it:

   Route::post('/api/upload', [YourComponent::class, 'uploadHandler']);
   

4. Localization Override Jodit’s language files by publishing assets:

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

   Edit resources/lang/vendor/jodit/*.php.

Pro Tips

• Preserve Formatting Use wire:ignore to prevent Livewire from re-rendering the editor unnecessarily:

  <div wire:ignore>
      <livewire:jodit-editor wire:model="content" />
  </div>
  

• Default Content Set default HTML via the default-content prop:

  <livewire:jodit-editor
      wire:model="content"
      default-content="<h1>Welcome!</h1>"
  />
  

• Dark Mode Toggle Jodit’s theme dynamically:

  <livewire:jodit-editor
      wire:model="content"
      :theme="request()->get('dark') ? 'dark' : 'light'"
  />