---
# System prepended metadata

title: Laravel - Demo utilização  SummerNote

---

# 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!
![](https://i.imgur.com/UNl0Pdi.png)

[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...