NukeViet Editors - Tự tạo CKEditor của riêng bạn
NukeViet cho phép tích hợp nhiều trình soạn thảo văn bản. Với chức năng này, chúng ta có thể cài đặt nhiều loại editor, tùy mục đích và sở thích của người dùng.
Trong hai bài viết Hướng dẫn cài đặt ckeditor - trình soạn thảo văn bản trên website và Tự chọn cấu hình ckeditor bằng Customize CKEditor mình đã có giới thiêu qua về cách tải về mã nguồn CKEditor và cài đặt hiển thị nó trên HTML. Mặc định, NukeViet đã trang bị cho người dùng CKEditor mới nhất qua các phiên bản, song không phải nó đã là phù hợp với nhu cầu riêng của từng của người dùng. Trong bài viết này, mình sẽ hướng dẫn cách để tạo CKEditor theo cấu hình của riêng bạn, không nhất thiết phải dùng CKEditor mặc định của NukeViet - nghĩa là bạn có thể tùy chọn các plugin, giao diện, hay ngôn ngữ của CKEditor.
1. Tải về mã nguồn
Bạn có thể tự chọn gói cấu hình theo nhu cầu của bạn, với một trong hai bài viết:- Hướng dẫn cài đặt ckeditor - trình soạn thảo văn bản trên website
- Tự chọn cấu hình ckeditor bằng Customize CKEditor (Thường mình sẽ dùng cái này)
2. Cài đặt trên NukeViet
- Thực hiện giải nén tập tin tải về từ bước 1, bạn sẽ có thư mục ckeditor- Đổi tên thư mục này thành tên bất kỳ, ví dụ mình đặt là myckeditor (vì tên thư mục chứa mã nguồn ckeditor măc định của NukeViet là ckeditor, nên đổi tên khác để không bị trùng tên thư mục).
- Copy thư mục này vào /assets/editors/. Khi đó sẽ tồn tại thư mục /assets/editors/myckeditor
- Tạo tập tin /assets/editors/myckeditor/nv.php với nội dung
<?php/** * @Project NUKEVIET 4.x * @Author VINADES.,JSC (contact@vinades.vn) * @Copyright (C) 2014 VINADES.,JSC. All rights reserved * @License GNU/GPL version 2 or any later version * @Createdate Apr 10, 2010 10:08:08 AM */if( ! defined( 'NV_MAINFILE' ) ) die( 'Stop!!!' );/** * nv_aleditor() * * @param mixed $textareaname * @param string $width * @param string $height * @param string $val * @return */function nv_aleditor( $textareaname, $width = '100%', $height = '450px', $val = '', $customtoolbar = '', $path = '', $currentpath = '' ){ global $global_config, $module_upload, $module_data, $admin_info, $client_info; $ckeditor_name = 'myckeditor'; $return = '<textarea style="width: ' . $width . '; height:' . $height . ';" id="' . $module_data . '_' . $textareaname . '" name="' . $textareaname . '">' . $val . '</textarea>'; if( ! defined( 'CKEDITOR' ) ) { define( 'CKEDITOR', true ); $return .= '<script type="text/javascript" src="' . NV_BASE_SITEURL . NV_EDITORSDIR . '/' . $ckeditor_name . '/ckeditor.js?t=' . $global_config['timestamp'] . '"></script>'; } $return .= "<script type=\"text/javascript\"> CKEDITOR.replace( '" . $module_data . "_" . $textareaname . "', {" . ( ! empty( $customtoolbar ) ? 'toolbar : "' . $customtoolbar . '",' : '' ) . " width: '" . $width . "',height: '" . $height . "',"; if( defined( 'NV_IS_ADMIN' ) ) { if( empty( $path ) and empty( $currentpath ) ) { $path = NV_UPLOADS_DIR; $currentpath = NV_UPLOADS_DIR; if( ! empty( $module_upload ) and file_exists( NV_UPLOADS_REAL_DIR . '/' . $module_upload . '/' . date( "Y_m" ) ) ) { $currentpath = NV_UPLOADS_DIR . '/' . $module_upload . '/' . date( "Y_m" ); $path = NV_UPLOADS_DIR . '/' . $module_upload; } elseif( ! empty( $module_upload ) and file_exists( NV_UPLOADS_REAL_DIR . '/' . $module_upload ) ) { $currentpath = NV_UPLOADS_DIR . '/' . $module_upload; } } if( ! empty( $admin_info['allow_files_type'] ) ) { $return .= "filebrowserUploadUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&" . NV_OP_VARIABLE . "=upload&editor=ckeditor&path=" . $currentpath . "',"; } if( in_array( 'images', $admin_info['allow_files_type'] ) ) { $return .= "filebrowserImageUploadUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&" . NV_OP_VARIABLE . "=upload&editor=ckeditor&path=" . $currentpath . "&type=image',"; } if( in_array( 'flash', $admin_info['allow_files_type'] ) ) { $return .= "filebrowserFlashUploadUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&" . NV_OP_VARIABLE . "=upload&editor=ckeditor&path=" . $currentpath . "&type=flash',"; } $return .= "filebrowserBrowseUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&popup=1&path=" . $path . "¤tpath=" . $currentpath . "', filebrowserImageBrowseUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&popup=1&type=image&path=" . $path . "¤tpath=" . $currentpath . "', filebrowserFlashBrowseUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&popup=1&type=flash&path=" . $path . "¤tpath=" . $currentpath . "' "; } $return .= "});</script>"; return $return;}
Tại dòng 26, $ckeditor_name = 'myckeditor';
thay giá trị myckeditor ứng với tên thư mục bạn đặt ở trên.- Truy cập Khu vực quản trị => Tài khoản => Quản trị. Chọn Sửa tài khoản của bạn.
- Taị hộp chọn Trình soạn thảo, chọn trình soạn thảo mới là myckeditor

- Nhấn Lưu thay đổi để hoàn tất.
- Mở một khu vực có sử dụng CKEditor bất kỳ để xem kết quả, và đây là kết quả của mình. (giao diện mình chọn màu đen)

Ý kiến bạn đọc
Bạn cần đăng nhập với tư cách là Thành viên chính thức để có thể bình luận