# Laravel - Demo utilização SummerNote
a criação de um campo de livre edição pode tornar nossas soluções mais flexiveis e elegantes. Principalmente quando este campo nos dá suporte a inclusao de imagens e tabelas de forma simplificada...
Apresentamos o ***[summernote](https://summernote.org/)*** que supri esta nossa demanda!
[toc]
## criação de projeto teste
```bash=
composer create-project laravel/laravel summernoteDemo
cd summernoteDemo
code .
```
## configuração do ambiente via SAIL
```bash=
php artisan sail:install
```
adicionado banco ==MariaDb==
```php=
DB_CONNECTION=mysql
DB_HOST=mariadb
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=password
```
```bash=
./vendor/bin/sail up -d
```
## criação da tabela posts
```bash=
php artisan make:migration create_posts_table
```
```php=
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
```
```bash=
./vendor/bin/sail artisan migrate
```
## criação da model Post
```bash=
php artisan make:model Post
```
### ajustes basicos na model
```php=
protected $fillable = [
'title',
'body'
];
```
## Criação da controller PostController
```bash=
php artisan make:controller PostController
```
### Inclusão das funcoes de tratamento
### Create
```php=
public function create()
{
$post = Post::query()
->when(
$request->exists('id'),
function ($q) use ($request) {
return $q->where('id', '=', $request->id);
}
)->get();
return view('postsCreate', ['posts' => $post]);
}
```
### Store
Aqui podemos utilizar técnicas diferentes de armazenamento as imagens...
em arquivo, em base64, em BLOB.
|Avaliação|Modo|Observações|
|-|-|-|
:+1::+1: |arquivo | modo mais recomendado de modo geral.
:-1::-1: |base64| aumenta em 25% o tamanho do arquivo devido a codificação apesar da praticidade de implementação.<br>Pode ser útil em situações onde se sabe que o volume de imagens será baixo.
:-1::+1: |BLOB|armazenamento da imagem em banco no modo binario; <br>Desvantagem é que banco tende a ser mais limitado em recursos|
#### salvando imagens no banco como base64
```php=
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required',
'body' => 'required'
]);
$post = Post::create([
'title' => $request->title,
'body' => $request->body;
]);
dd($post->toArray());
}
```
#### Extraíndo imagens e salvando como arquivos...
```php=
public function store(Request $request)
{
$this->validate($request, [
'title' => 'required',
'body' => 'required'
]);
$content = $request->body;
$dom = new \DomDocument();
$dom->loadHtml($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$imageFile = $dom->getElementsByTagName('img');
foreach ($imageFile as $item => $image) {
$data = $image->getAttribute('src');
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$imgeData = base64_decode($data);
$image_name = "/storage/uploads/" . time() . $item . '.png';
$path = public_path() . $image_name;
file_put_contents($path, $imgeData);
$image->removeAttribute('src');
$image->setAttribute('src', $image_name);
}
$content = $dom->saveHTML();
$post = Post::create([
'title' => $request->title,
'body' => $content
]);
dd($post->toArray());
}
```
:::danger
Se resolver armazenar em arquivos, lembrar de habilitar storage no laravel...
```bash=
./vendor/bin/sail artisan storage:link
```
:::
## Configuração das rotas utilizadas na demo
```php=
Route::get('/', [PostController::class, 'create']);
Route::post('posts/store', [PostController::class, 'store'])->name('posts.store');
```
## Criação da view PostCreate.blade.php
```html=
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1"
name="viewport">
<title>Laravel 9 Summernote Editor Image Upload Example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css"
rel="stylesheet" />
</head>
<body>
<div class="container mt-5">
<h1>Laravel 9 Summernote Editor Image Upload DEMO </h1>
<form action="{{ route('posts.store') }}"
enctype="multipart/form-data"
method="post">
@csrf
<div class="form-group">
<label>Title</label>
<input class="form-control"
name="title"
type="text"
value="{{ $posts[0]['title'] ?? null }}" />
</div>
<div class="form-group">
<label>Description</label>
<textarea id="summernote"
name="body">{{ $posts[0]['body'] ?? null }}</textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-success btn-block"
type="submit">Publish</button>
</div>
</form>
</div>
<hr>
@forelse ($posts as $post)
<table border="1">
<tr>
<td>{{ $post->title }}</td>
</tr>
<tr>
<td>{!! $post->body !!}</td>
</tr>
</table>
<hr>
@empty
<span>sem dados aqui...</span>
@endforelse
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#summernote').summernote({
height: 300
});
});
</script>
```
Valeu! :sunglasses:
:information_source: Baseado no [howto](https://www.itsolutionstuff.com/post/laravel-9-summernote-editor-with-image-uploadexample.html) com alguns ajustes...
Sign in with Wallet
Connect another wallet