Hai Dev,

Dalam tutorial ini, saya akan menjelaskan cara menambahkan editor TinyMCE di aplikasi laravel. Satu hal yang baik tentang tinymce adalah bobotnya yang sangat ringan dan dapat dengan mudah digunakan di situs web mana pun.

TinyMCE sama dengan CKeditor yang berbeda adalah tata letak dan banyak fitur yang tersedia di editor TinyMCE. Aplikasi laravel kami mendukung editor TinyMCE. Sangat mudah untuk mengintegrasikan tinymce ke dalam laravel.

Saat kami perlu menyimpan teks panjang, konten artikel, ringkasan produk, dan konten tag yang berbeda dengan deskripsi di database kami, kami menggunakan editor HTML WYSIWYG.

Laravel menyediakan editor gratis The WYSIWYG TinyMCE editor. Jadi mari ikuti langkah-langkah di bawah ini melalui menambahkan TinyMCE di Laravel.

Langkah 1: Instal Aplikasi Laravel

Pada langkah ini, Anda dapat menginstal aplikasi baru laravel. Jadi buka terminal dan letakkan perintah di bawah ini.

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Siapkan Konfigurasi Database

Setelah berhasil menginstal aplikasi laravel kemudian mengkonfigurasi pengaturan database. Kami akan membuka file ".env" dan mengubah nama database, nama pengguna dan kata sandi di file env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Langkah 3: Buat Tabel Migration dan Model

Pada langkah ini kita harus membuat migrasi untuk tabel buku dan Model buku menggunakan perintah Laravel php artisan, jadi jalankan perintah di bawah ini:

php artisan make:model Book -m

Setelah perintah ini Anda harus meletakkan kode di bawah ini di file migrasi Anda untuk membuat tabel books.

/database/migrations/2020_05_27_100722_create_books_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateBooksTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('books', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->longText('description');
            $table->string('auther_name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('books');
    }
}

Sekarang kita perlu menjalankan migrasi menjadi perintah di bawah ini:

php artisan migrate

Setelah Anda harus meletakkan kode di bawah ini di file Model buku Anda untuk membuat tabel buku.

app/Book.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    protected $fillable = ['name','description','auther_name'];
}

Langkah 3: Buat Route

Sekarang, kita perlu menambahkan route controller buku di aplikasi laravel. jadi buka file "routes/web.php" Anda dan tambahkan route berikut.

app/Book.php

Route::get('books','BookController@index');
Route::post('books','BookController@store')->name(books.store);
Route::get('books/{id}','BookController@show')->name(books.show);

Langkah 4: Buat Controller

Di sini langkah ini sekarang kita harus membuat pengontrol baru sebagai BookController. Jadi jalankan perintah di bawah dan buat controller baru.

php artisan make:controller BookController

Setelah berhasil menjalankan perintah di atas. Jadi, mari kita salin kode di bawah ini dan letakkan di file BookController.php.

app/http/controller/BookController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Book;

class BookController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('book.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $input = $request->all();
        Book::create($input);
        return redirect()->back();
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show(Book $book)
    {
        return view('book.show',compact('book'));
    }
}

Langkah 5: Buat File Blade

Di langkah terakhir. Pada langkah ini kita harus membuat dua file blade. Jadi utamanya kita harus membuat folder buku di direktori view. File pertama adalah create dan yang kedua adalah show file. Jadi akhirnya Anda harus membuat file berikut dan meletakkan kode di bawah ini:

/resources/views/book/create.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Use TinyMCE Editor In Laravel ? - Medikre.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="showimages"></div>
            </div>
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">How To Use TinyMCE Editor In Laravel ? - Medikre.com</h6>
                    </div>
                    <div class="card-body">
                        <form class="image-upload" method="post" action="{{ route('books.store') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" name="name" class="form-control"/>
                            </div>  
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" rows="5" cols="40" class="form-control tinymce-editor"></textarea>
                            </div>  
                            <div class="form-group">
                                <label>Author Name</label>
                                <input type="text" name="auther_name" class="form-control"/>
                            </div>
                            <div class="form-group text-center">
                                <button type="submit" class="btn btn-success btn-sm">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>  
    <script type="text/javascript">
        tinymce.init({
            selector: 'textarea.tinymce-editor',
            height: 100,
            menubar: false,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | ' +
                'bold italic backcolor | alignleft aligncenter ' +
                'alignright alignjustify | bullist numlist outdent indent | ' +
                'removeformat | help',
            content_css: '//www.tiny.cloud/css/codepen.min.css'
        });
    </script>
</body>
</html>

/resources/views/book/show.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How To Use TinyMCE Editor In Laravel ? - Medikre.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha256-aAr2Zpq8MZ+YA/D6JtRD3xtrwpEz2IqOS+pWD/7XKIw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha256-OFRAJNoaD8L3Br5lglV7VyLRf0itmoBzWUoM+Sji4/8=" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div id="showimages"></div>
            </div>
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header bg-info">
                        <h6 class="text-white">How To Use TinyMCE Editor In Laravel ? - Medikre.com</h6>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered">
                            <tr>
                                <th>No.</th>
                                <th>Name</th>
                                <th>Author Name</th>
                                <th>Description</th>
                            </tr>
                            <tr>
                                <td>{{ $book->id }}</td>
                                <td>{{ $book->name }}</td>
                                <td>{{ $book->auther_name }}</td>
                                <td>{!! $book->description !!}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Sekarang kami siap untuk menjalankan contoh kami jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah di browser Anda:

http://localhost:8000/books

Itu akan membantumu...