Combo Edittext cho yii2 : Ckeditor + Elfinder

0
677

Ckeditor với ELfinder giải quyết vấn đề gì cho chúng ta tại sao phải dùng chúng .Lý do chính là việc chúng ta cần 1 thứ giúp ta giải quyết vấn đề là làm sao chúng ta có những đoạn văn bản sinh động ,bắt mắt ,những hình ảnh đẹp lung linh trong nội dung

Các cài đặt Ckeditor + Elfinder :

Bạn vào file composer.json thêm 2 dòng sau

"mihaildev/yii2-ckeditor": "*",
		"mihaildev/yii2-elfinder": "*"

Vào bên trong require

require_ckeditor

Sau đó bạn chạy lệnh cmd: composer update tại thư mục cài đặt nhằm tải 2 extentions là ckeditor và elfinder vào vedor

Cấu hình Ckeditor + Elfinder

Cấu hình này giúp chúng ta xử lý việc uploads ảnh trong ckeditor .Mặc định thằng ckeditor không cho upload ảnh .Cấu hình ckeditor và Elfinder giải quyết vấn đề đó gồm 2 phần cấu hình  là :

1 Tạo 1 thư mục tên uploads mới trong folder frontend/web

2 Cấu hình main.php .Các bạn nhớ là cấu hình trong frontend và backend thôi nhé không cấu hình trong common .Mình 1 lần mất đến nửa ngày nghĩ tại sao nó không chạy .Dưới đây là đoạn code mà hbsprogram.com mình cấu hình .Các bạn có thể tham khảo

'controllerMap' => [
				'elFinder' => [
						'class' => 'mihaildev\elfinder\PathController',
						'access' => ['@'],
						'disabledCommands' => ['preview', 'rm', 'duplicate', 'rename', 'extract', 'archive', 'help', 'netmount', 'info', 'cut', 'download', 'mkfile'],
						'connectOptions' => [
								'bind' => array(
										'upload.pre mkdir.pre mkfile.pre rename.pre archive.pre ls.pre' => [
												'Plugin.Normalizer.cmdPreprocess',
												'Plugin.Sanitizer.cmdPreprocess',
										],
										'ls' => [
												'Plugin.Normalizer.cmdPostprocess',
												'Plugin.Sanitizer.cmdPostprocess',
										],
										'upload.presave' => [
												'Plugin.Normalizer.onUpLoadPreSave',
												'Plugin.Sanitizer.onUpLoadPreSave',
										],
								),
								'plugin' => [
										'Youtube' =>[
												
										],
										'Sanitizer' => [
												'enable' => true,
												'targets' => ['\\', '/', ':', '*', '?', '"', '<', '>', '|', '&'],
												'replace' => '-'
										],
										'Normalizer' => [
												'enable' => true,
												'nfc' => true,
												'nfkc' => true,
												'lowercase' => true,
												'convmap' => [
														' ' => '-',
														',' => '-',
														'^' => '-',
														'à' => 'a', 'á' => 'a', 'ả' => 'a', 'ã' => 'a', 'ạ' => 'a',
														'ă' => 'a', 'ằ' => 'a', 'ắ' => 'a', 'ẳ' => 'a', 'ẵ' => 'a', 'ặ' => 'a',
														'â' => 'a', 'ầ' => 'a', 'ấ' => 'a', 'ẩ' => 'a', 'ẫ' => 'a', 'ậ' => 'a',
														'À' => 'a', 'Á' => 'a', 'Ả' => 'a', 'Ã' => 'a', 'Ạ' => 'a',
														'Ă' => 'a', 'Ằ' => 'a', 'Ắ' => 'a', 'Ẳ' => 'a', 'Ẵ' => 'a', 'Ặ' => 'a',
														'Â' => 'a', 'Ầ' => 'a', 'Ấ' => 'a', 'Ẩ' => 'a', 'Ẫ' => 'a', 'Ậ' => 'a',
														'đ' => 'd', 'Đ' => 'd',
														'è' => 'e', 'é' => 'e', 'ẻ' => 'e', 'ẽ' => 'e', 'ẹ' => 'e',
														'ê' => 'e', 'ề' => 'e', 'ế' => 'e', 'ể' => 'e', 'ễ' => 'e', 'ệ' => 'e',
														'È' => 'e', 'É' => 'e', 'Ẻ' => 'e', 'Ẽ' => 'e', 'Ẹ' => 'e',
														'Ê' => 'e', 'Ề' => 'e', 'Ế' => 'e', 'Ể' => 'e', 'Ễ' => 'e', 'Ệ' => 'e',
														'ì' => 'i', 'í' => 'i', 'ỉ' => 'i', 'ĩ' => 'i', 'ị' => 'i',
														'Ì' => 'i', 'Í' => 'i', 'Ỉ' => 'i', 'Ĩ' => 'i', 'Ị' => 'i',
														'ò' => 'o', 'ó' => 'o', 'ỏ' => 'o', 'õ' => 'o', 'ọ' => 'o',
														'ô' => 'o', 'ồ' => 'o', 'ố' => 'o', 'ổ' => 'o', 'ỗ' => 'o', 'ộ' => 'o',
														'ơ' => 'o', 'ờ' => 'o', 'ớ' => 'o', 'ở' => 'o', 'ỡ' => 'o', 'ợ' => 'o',
														'Ò' => 'o', 'Ó' => 'o', 'Ỏ' => 'o', 'Õ' => 'o', 'Ọ' => 'o',
														'Ô' => 'o', 'Ồ' => 'o', 'Ố' => 'o', 'Ổ' => 'o', 'Ỗ' => 'o', 'Ộ' => 'o',
														'Ơ' => 'o', 'Ờ' => 'o', 'Ớ' => 'o', 'Ở' => 'o', 'Ỡ' => 'o', 'Ợ' => 'o',
														'ù' => 'u', 'ú' => 'u', 'ủ' => 'u', 'ũ' => 'u', 'ụ' => 'u',
														'ư' => 'u', 'ừ' => 'u', 'ứ' => 'u', 'ử' => 'u', 'ữ' => 'u', 'ự' => 'u',
														'Ù' => 'u', 'Ú' => 'u', 'Ủ' => 'u', 'Ũ' => 'u', 'Ụ' => 'u',
														'Ư' => 'u', 'Ừ' => 'u', 'Ứ' => 'u', 'Ử' => 'u', 'Ữ' => 'u', 'Ự' => 'u',
														'ỳ' => 'y', 'ý' => 'y', 'ỷ' => 'y', 'ỹ' => 'y', 'ỵ' => 'y',
														'Y' => 'y', 'Ỳ' => 'y', 'Ý' => 'y', 'Ỷ' => 'y', 'Ỹ' => 'y', 'Ỵ' => 'y'
												]
										],
								],
								'onlyMimes' => ["image/png", "application/x-shockwave-flash"]
						],
						'root' => [
								//nếu localhost thì như dưới nếu trên domain thì baseUrl để trống
								'baseUrl' => 'http://localhost/demoyii2/frontend/web/',
								'basePath' => '@frontend/web',
								'path' => 'uploads',
								'name' => 'Uploads',
								'options' => [
										'uploadOverwrite' => false,
								],
						]
				],
		],

Cấu hình này phù hợp với việc upload ảnh tiếng việt lên .Các bạn tham khảo và cài đặt phù hợp với project của mình nhé .ControllerMap này nằm ngang hàng với component đó cả nhà .

Tiếp theo chúng ta sẽ đến phần sử dụng nó sau khi cấu hình thành công

Bạn vào file _form.php ở folder views của controller bất kì chỉnh sửa như sau để xem kết quả nhé

<?= $form->field($model, 'article_body')->widget(\mihaildev\ckeditor\CKEditor::className(), [
        'editorOptions' => \mihaildev\elfinder\ElFinder::ckeditorOptions([
            'elFinder',
        ],[
            'preset' => 'full',
            'inline' => false,
        ])
    ]) ?>

Ok vậy là đã xong cả nhà .Hãy xem và cảm nhận kết quả nhé

demo_ckeditor_yii2

Có gì thắc mắc bạn hãy để lại comment phía dưới mình sẽ cùng các bạn giải quyết vấn đề đó để nâng cao niềm đam mê web với hbsprogram.com nhé