Laravel Wweditor Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require softbery-org/laravel-wweditor
   php artisan vendor:publish --tag=wweditor-assets
   php artisan vendor:publish --tag=wweditor-config
   

   Add the service provider to config/app.php:

   Softbery\WwEditor\WwEditorServiceProvider::class
   

2. First Use Case: Embed a basic editor in a Blade view:

   <x-wweditor::editor id="post-content" content="{{ old('content', $post->content ?? '') }}" />
   

Key Configuration

• Publish and update config/wweditor.php for route prefix, middleware, and storage settings.
• Set environment variables in .env (e.g., WWEDITOR_AUTO_SAVE=true).

Implementation Patterns

Blade Integration

• Dynamic Content:

  <x-wweditor::editor
      id="dynamic-editor"
      :content="$model->description"
      :css="$model->custom_css"
      height="400px"
  />
  

• Form Integration:

  <form method="POST" action="/posts">
      @csrf
      <x-wweditor::editor id="post-body" name="content" />
      <button type="submit">Save</button>
  </form>
  

Controller Workflows

• Load/Save Logic:

  public function edit(Post $post) {
      return view('posts.edit', compact('post'));
  }
  
  public function update(Request $request, Post $post) {
      $post->update([
          'content' => $request->input('content'),
          'css'     => $request->input('css', '')
      ]);
  }
  

API-Driven Usage

• JavaScript Initialization:

  const editor = new WwEditorLaravel('editor-id', {
      saveUrl: '/wweditor/save',
      loadUrl: '/wweditor/load/{{ $post->id }}',
      autoSave: true
  });
  

Multi-Editor Pages

• Unique IDs and Data Binding:

  @foreach($posts as $post)
      <x-wweditor::editor
          id="editor-{{ $post->id }}"
          content="{{ $post->content }}"
          data-post-id="{{ $post->id }}"
      />
  @endforeach
  

Gotchas and Tips

Common Pitfalls

1. Asset Loading Issues:

   • Run php artisan optimize:clear after publishing assets.
   • Verify public_path() in config/wweditor.php points to the correct directory.

2. Auto-Save Failures:

   • Ensure web middleware is included (or your custom middleware supports CSRF).
   • Check browser console for blocked requests (e.g., CORS or CSRF token errors).

3. Storage Permissions:

   • Configure WWEDITOR_DISK in .env (e.g., public) and ensure the disk is writable:

     php artisan storage:link
     

Debugging Tips

• Network Tab: Inspect /wweditor/save and /wweditor/load endpoints for errors.
• Logs: Check storage/logs/laravel.log for storage/disk issues.
• JavaScript Errors: Use editor.on('error', (e) => console.log(e)) to catch editor events.

Extension Points

1. Custom Toolbar:

   <x-wweditor::editor
       :toolbar="['bold', 'italic', 'customButton']"
       custom-button="{
           text: 'My Button',
           action: () => alert('Clicked!')
       }"
   />
   

2. Override Default Routes:

   Route::prefix('admin')->group(function () {
       Route::post('content/save', [WwEditorController::class, 'save']);
   });
   

3. Disable Modes:

   <x-wweditor::editor :modes="['wysiwyg']" />  // Only WYSIWYG mode
   

Performance Optimization

• Disable Auto-Save for Large Editors:

  <x-wweditor::editor :auto-save="false" />
  

• Lazy-Load Assets:

  editor.loadAssets().then(() => editor.init());
  

Security Notes

• Sanitize Content: Use Laravel’s Str::of($content)->markdown() or a package like htmlpurifier for user-uploaded HTML.
• Middleware: Restrict editor routes to authenticated users:

  'middleware' => ['web', 'auth'],