Вступ

Summernote — це популярний відкритий WYSIWYG (What You See Is What You Get) редактор, який надає можливості для редагування тексту в веб-додатках. Інтеграція з Laravel дозволяє користувачам створювати відформатований контент без зусиль, при цьому зберігаючи контроль над бекендом. Ця стаття допоможе вам інтегрувати Summernote в Laravel додаток, охоплюючи установку, налаштування, обробку зображень та питання безпеки.

Передумови

• Встановлений Laravel 8+
• Налаштоване з'єднання з базою даних
• Базові знання шаблонів Laravel Blade
• Встановлені Node.js та NPM/Yarn

Крок 1: Встановлення Summernote

1.1 Встановлення через NPM/Yarn

npm install summernote  
# або  
yarn add summernote

1.2 Додавання ресурсів

Додайте CSS та JS для Summernote в конфігурацію Laravel Mix:

resources/js/app.js

import 'summernote/dist/summernote-bs4.css';  
import 'summernote';

resources/sass/app.scss

@import '~summernote/dist/summernote-bs4.css';

Компільте ресурси:

npm run dev

Крок 2: Створення інтерфейсу редактора

2.1 Налаштування Blade шаблону

Створіть форму в вашому Blade шаблоні:

resources/views/posts/create.blade.php

@extends('layouts.app')  

@section('content')  

 @csrf  

Post Content        
Submit         @section('scripts')      @endsection   @endsection

Крок 3: Обробка подачі форми

3.1 Створення контролера

php artisan make:controller PostController

app/Http/Controllers/PostController.php

public function store(Request $request)   
{    
    $validated = $request->validate([    
        'content' => 'required|string'    
    ]);       
    $post = Post::create([    
        'content' => $request->content    
    ]);       
    return redirect()->route('posts.show', $post);   
}

3.2 Налаштування моделі

Створіть модель Post та міграцію:

php artisan make:model Post -m

database/migrations/xxxxcreateposts_table.php

Schema::create('posts', function (Blueprint $table) {    
    $table->id();    
    $table->longText('content');    
    $table->timestamps();   
});

Крок 4: Виведення відформатованого контенту

В вашому шаблоні для перегляду:

    {!! $post->content !!}

Примітка безпеки: Завжди очищуйте HTML-виведення. Рекомендується використовувати вбудований пакет Laravel Purifier:

composer require mews/purifier

Крок 5: Обробка завантаження зображень

5.1 Налаштування завантаження зображень в Summernote

Оновіть ініціалізацію Summernote:

$('#summernote').summernote({    
    // ...
});

# 5.1 Налаштування завантаження зображень в Summernote

Оновіть ініціалізацію Summernote:

$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
uploadImage(files[0]);
}
}
});

function uploadImage(file) {
let formData = new FormData();
formData.append('image', file);

fetch('/upload-image', {  
    method: 'POST',  
    headers: {  
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content  
    },  
    body: formData  
})  
.then(response => response.json())  
.then(data => {  
    $('#summernote').summernote('insertImage', data.url);  
});  

}
```

5.2 Створення точки завантаження зображень

routes/web.php

Route::post('/upload-image', [PostController::class, 'uploadImage'])->name('image.upload');

app/Http/Controllers/PostController.php

public function uploadImage(Request $request)  
{  
    $request->validate([  
        'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048'  
    ]);  

    $path = $request->file('image')->store('public/images');  
    $url = Storage::url($path);  

    return response()->json(['url' => $url]);  
}

Заходи безпеки

1. Валідація введених даних

$request->validate([  
    'content' => 'required|string'  
]);

use Mews\Purifier\Facades\Purifier;  

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

2. Очищення HTML

use Mews\Purifier\Facades\Purifier;  

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

3. Безпека завантаження файлів

• Обмеження типів файлів
• Встановлення обмежень по розміру
• Зберігання файлів поза публічною директорією
• Використання випадкових імен файлів

Налаштування редактора

1. Конфігурація панелі інструментів

toolbar: [  
    ['font', ['bold', 'italic', 'underline']],  
    ['para', ['ul', 'ol']],  
    ['insert', ['link', 'picture']],  
    ['view', ['fullscreen']]  
]

1. Користувацькі плагіни

$.summernote.addPlugin({  
    'hello': function(context) {  
        var ui = $.summernote.ui;  
        var button = ui.button({  
            contents: 'Hello',  
            click: function() {  
                context.invoke('editor.insertText', 'Hello World!');  
            }  
        });  
        return button.render();  
    }  
});

Висновок

Інтеграція Summernote з Laravel забезпечує потужний інтерфейс для створення контенту, зберігаючи контроль за обробкою на бекенді. Дотримуючись цих кроків, ви реалізували:

• Можливості для редагування тексту з багатим форматуванням
• Безпечну обробку завантаження зображень
• Очищення контенту
• Користувацький інтерфейс редактора

Не забувайте завжди валідувати та очищати введення користувача, особливо при роботі з HTML контентом. Комбінація гнучкості фронтенду Summernote та потужних бекенд можливостей Laravel створює ефективне рішення для управління контентом у сучасних веб-додатках.

Подальше читання

• Офіційна документація Summernote
• Зберігання файлів у Laravel
• Налаштування HTML Purifier

Перекладено з: Integrating Summernote WYSIWYG Editor in Laravel Applications