NukeViet Editors - Tự tạo CKEditor của riêng bạn

Thứ sáu - 28/08/2015 08:29
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:

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 . "&currentpath=" . $currentpath . "',
			 filebrowserImageBrowseUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&popup=1&type=image&path=" . $path . "&currentpath=" . $currentpath . "',
			 filebrowserFlashBrowseUrl: '" . NV_BASE_SITEURL . NV_ADMINDIR . "/index.php?" . NV_NAME_VARIABLE . "=upload&popup=1&type=flash&path=" . $path . "&currentpath=" . $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
Cài đặt ckeditor NukeViet

- 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)
 
cài đặt ckeditor NukeViet

Tổng số điểm của bài viết là: 5 trong 1 đánh giá

Xếp hạng: 5 - 1 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Trung tâm ứng dụng NukeViet
Ghi rõ nguồn khi sao chép thông tin từ website này.

Powered by NukeViet - a product of VINADES.,JSC