Khi chúng ta định dạng ví dụ như font chữ hay màu sắc thì chúng ta không cần phải chỉnh sửa viết mã nguồn và việc đó là của CKEditor nó làm khi chúng ta định dạng và nhập dữ liệu vào cơ sở dữ liệu.
Giới thiệu về ckeditor
- ckeditor là bộ soạn thảo dữ liệu cực kì mạnh mẽ và được sử dụng rất phổ biến hiện nay với số lượt download hơn 17 triệu lượt từ thời điểm ra mắt.
- Đây là mã nguồn mở cho phép bạn download miễn phí và việc cài đặt ckeditor và việc tích hợp ckeditor cũng rất dễ dàng nhanh chóng.
Cài đặt ckeditor
Để tích hợp ckeditor vào Laravel, việc đầu tiên chúng ta cần phải download gói thư viện ckeditor về máy tính. Các bước thực hiện như sau :
1. Truy cập vào địa chỉ download ckeditor sẽ thấy như hình dưới
2. Tại đây có nhiều gói cài đặt ckeditor bao gồm:
- Basic Package : Chứa 17 plugin, thanh công cụ đơn giản
- Standard Package : Chứa 48 plugin, chứa những thanh công cụ phổ biến và cần thiết cho soạn thảo
- Full Package : Gói đầy đủ, chứa 73 plugin, thêm những công cụ khác
- Customize : Gói này bạn sẽ tự điều chỉnh những thanh công cụ nào cần cho website của bạn
Trong phạm vi bài viết này, mình sẽ chọn gói Standard Package, rồi ấn nút Download.
Sau khi download file zip về máy, chúng ta sẽ được file ckeditor_4.6.2_standard.zip, bạn giải nén file này ra sẽ được thư mục ckeditor, sau đó copy toàn bộ thư mục này và bỏ vào đường dẫn website của chúng ta .Ví dụ /public/ckeditor
Sau đó link đến file ckeditor.js .Tạo thẻ textarea và replace nó bằng Ckeditor
<html>
<head>
<title>How to Install And Use CKEditor In Laravel</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-2 mt-5">
<div class="card">
<div class="card-header bg-info">
<h6 class="text-white">How to Install And Use CKEditor In Laravel? vuvanlong.com</h6>
</div>
<div class="card-body">
<form method="post" action="" 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><strong>Description :</strong></label>
<textarea class="ckeditor form-control" name="description" id="noidung"></textarea>
</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>
</body>
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace( 'noidung');
</script>
</html>Kết quả mà chúng ta sẽ có được như sau
Display Content
để hiển thị nội dung bạn đã lựu trong CSDL thì ta dùng cú pháp
{!! $post->description !!}