Chào mọi người bài viết hôm nay mình sẽ giới thiệu tổng quan về 2 loại content editor phổ biến hiện nay được ứng nhiều trên nền tảng website:
Về CKEditor là 1 công cụ với hơn 10 năm kinh nghiệm phát triển thì bạn có thể hoàn toàn yên tâm về chất lượng của trình soạn thảo văn bản này nhé. Nó hỗ trợ hơn 70 ngôn ngữ trong đó có cả Việt Nam và được nhiều lập trình viên sử dụng thì mình nghĩ đây là sự lựa chọn tốt cho trang web của bạn. Không chỉ vậy nó còn có thể chạy trên nhiều trình duyệt khác nhau, làm việc tốt với hầu hết framework front end hiện nay, bạn có thể sử dụng CDN để nhúng trực tiếp vào trang HTML của mình...
Hiện nay nó có hai phiên bản chạy song song là CKEditor 4 và CKEditor5, tùy vào mục đích sử dụng mà mình sẽ chọn trình soạn thảo phù hợp. Trên trang chủ cũng có miêu tả chi tiết về hai chương trình này mình sẽ gắn link bên dưới
https://ckeditor.com/docs/ckbox/latest/guides/quick-start.html
Về TinyMCE là một trình soạn thảo giúp quản trị viên có thể linh hoạt chỉnh sửa thêm bớt những phần mình mong muốn trong chương trình này một cách dễ dàng. Ngoài các yếu tố cơ bản cho một trình soạn thảo thì mình thấy nó cũng cung cấp nhiều hỗ trợ nhằm giúp trải nghiệm người dùng tốt hơn như là thêm comment, kiểm tra đường dẫn, cung cấp icon và skin cao cấp, kiểm tra lỗi chính tả cho nội dung... Tuy nhiên đây cũng là điểm yếu của nó vì muốn sử dụng các công cụ cao cấp thì phí rơi vào khoảng 25 $ cho một tháng.
https://www.tiny.cloud/docs/tinymce/6/
Tiếp theo sẽ là phần tích hợp 2 editor này trên nền tảng web Laravel
CKeditor:
Trước tiên các bạn cần download CKEditor 4 về máy tính: https://ckeditor.com/ckeditor-4/download/
Sau khi download các bạn giải nén thư mục ckeditor vào trong folder public của Laravel
Ngoài ra, để sử dụng thêm tính năng Upload Image của CKEditor mình cần phải cài đặt thêm CKFinder:
https://ckeditor.com/ckfinder/download/
Để cài đặt package CKFinder mình sẽ chạy lần lượt 2 lệnh sau
composer require ckfinder/ckfinder-laravel-package
php artisan ckfinder:download
Sau khi quá trình cài đặt và download hoàn tất chạy tiếp lệnh sau để xuất file css, js và file config
php artisan vendor:publish --tag=ckfinder
Cuối cùng tạo thư mục userfiles bên trong public của Laravel
Chú ý: CKFinder là phần mềm trả phí nên với package CKFinder có thể sẽ cần phải điền licenseName và licenseKey. Để lấy 2 thông tin này các bạn có thể truy cập: https://ckfinder.sanvu88.net/ sau khi có 2 thông số trên các bạn điền vào file /config/ckfinder.php
`/============================ License Key ============================================/
// http://docs.cksource.com/ckfinder3-php/configuration.html#configuration_options_licenseKey
$config['licenseName'] = '';
$config['licenseKey'] = '';`
**Tích hợp CKEditor và CKFinder vào Laravel:
Tạo file view test.blade.php với nội dung như sau:**
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=UTF-8>
<title>Document</title>
</head>
<body>
<textarea name=text id="text" cols="30" rows="10"></textarea>
<script src={{ url('ckeditor/ckeditor.js') }}></script>
<script>
CKEDITOR.replace( 'text', {
filebrowserBrowseUrl: '{{ route('ckfinder_browser') }}',
} );
</script>
@include('ckfinder::setup')
</body>
</html>**Tạo tiếp route:**Route::get('/test', function () {
return view('test');
});
`
Sau đó truy cập vào blade và kiểm tra kết quả:
TinyMCE:
Trước tiên mình sẽ cần phải cài đặt thêm package File Manager để tích hợp chung với TinyMCE:
Mình sẽ chạy lệnh: composer require unisharp/laravel-filemanager
Sau khi cài đặt xong cần phải public package và khai báo trong config/app.php
Thêm class vào Service Providers:
UniSharp\LaravelFilemanager\LaravelFilemanagerServiceProvider::class,
Intervention\Image\ImageServiceProvider::class,
Thêm class vào Aliases:
'Image' => Intervention\Image\Facades\Image::class,
Publish package sau khi cài:
php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public
Clear cache nữa nhé:
php artisan route:clear
php artisan config:clear
Link folder mà package sẽ dùng để lưu ảnh trong storage
php artisan storage:link
Tiếp theo sẽ phải tạo View .blade và route để sử dụng:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Timymce</title>
</head>
<body>
<form action="#" method="post" enctype="multipart/form-data">
@csrf
<textarea id="tinymce_editor" name="tinymce_editor"></textarea>
<button type="submit">Submit</button>
</form>
</body>
</html>
Route::get('/tinymce', function () {;
return view('tinymce');
});
Mình sẽ tách ra 1 file JS để nhúng trình soạn thảo:
let editor_config = {
path_absolute : "/",
selector: "textarea.tinymce_editor",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
relative_urls: false,
file_browser_callback : function(field_name, url, type, win) {
let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
let cmsURL = editor_config.path_absolute + 'filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinyMCE.activeEditor.windowManager.open({
file : cmsURL,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
resizable : "yes",
close_previous : "no"
});
}
};
tinymce.init(editor_config);
Sau khi thành công mình sẽ nhận hiển thị ra được như sau:
Và việc cài thêm package File Manager sẽ giúp việc quản lý folder ảnh content dễ dàng hơn
Việc edit nội dung dành cho quản trị viên cũng được đa dạng hơn:
Như vậy bài viết đầu tiên của mình đã xong rất mong được sự góp ý từ các khán thính giả nghe đài 🇦 🇧 🇨
