Hướng dẫn thêm trình soạn thảo Ckeditor vào một module NukeViet

Đối với NukeViet 3.x

Mô tả quá trình cơ bản

• Đọc dữ liệu HTML từ CSDL nếu cần thiết và chuyển ký tự <br /> sang nl (Ký tự xuống dòng).
• Gọi ra file php chứa code để add CKeditor.
• Chuyển các ký tự đặc biệt trong dữ liệu HTML sang ký tự đặc biệt.
• Chuyển dữ liệu HTML sang dữ liệu editor.
• Xuất ra Template.
• Xuất ra code HTML.
• Khi submit from
  • Lấy nội dung submit.
  • Chuyển ký tự xuống dòng sang ký tự <br />.
  • Lưu vào CSDL.

Cách thực hiện chi tiết

sNếu ứng dụng cần thiết đọc nội dung HTML sẵn có từ CSDL thì ta tiến hành lệnh SQL để đọc dữ liệu, giả sử dữ liệu đọc được lưu vào biến $array['documentation']. Sau khi đọc nội dung HTML vào biến $array['documentation'], ta tiến hành chuyển ký tự <br /> sang nl (Ký tự xuống dòng) bằng lệnh

$array['documentation'] = nv_editor_br2nl( $array['documentation'] );

Để xử lý dữ liệu HTML sang dữ liệu của trình soạn thảo ta cần gọi ra thư viện của trình soạn thảo. Cách gọi trong admin và ngoài site là khác nhau, trong admin, mặc định (nếu không bị cấm) file xử lý dữ liệu của trình soạn thảo luôn được gọi do dó để gọi ra ta chỉ cần kiểm tra xem dữ liệu của trình soạn thảo đã có chưa, nếu không có thì gọi

if ( defined( 'NV_EDITOR' ) )
{
 require_once ( NV_ROOTDIR . '/' . NV_EDITORSDIR . '/' . NV_EDITOR . '/nv.php' );
}

Đối với khu vực ngoài site, mặc định nếu như admin có quyền và đã đăng nhập quản trị viên, bên ngoài site dữ liệu của trình soạn thảo cũng đã được gọi sẵn, còn thành viên hoặc khách thông thường thì không có, dó đó có thể kiểm tra xem đối tượng truy cập hiện tại là admin hay thành viên hoặc khách thông thường, nếu thành viên hoặc khách thông thường ta cần tạo dữ liệu riêng cho trình soạn thảo. Ở đây tôi chọn cách tạo dữ liệu riêng cho trình soạn thảo bất kể là admin hay là thành viên hoặc khách thông thường. Sử dụng code

// Trinh soan thao
require_once (NV_ROOTDIR . '/' . NV_EDITORSDIR . '/ckeditor/ckeditor_php5.php');

function nv_simple_editor($textareaname, $width = "100%", $height = '450px', $val = '')
{
 global $module_name, $global_config;
 $editortoolbar = array( array('Link', 'Unlink', 'Image', 'Table', 'Font', 'FontSize', 'RemoveFormat'), array('Bold', 'Italic', 'Underline', 'StrikeThrough', '-', 'Subscript', 'Superscript', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', 'OrderedList', 'UnorderedList', '-', 'Outdent', 'Indent', 'TextColor', 'BGColor', 'Source'));
 $CKEditor = new CKEditor();
 $CKEditor->returnOutput = true;
 $CKEditor->config['skin'] = 'kama';
 $CKEditor->config['entities'] = false;
 $CKEditor->config['enterMode'] = 2;
 $CKEditor->config['language'] = NV_LANG_INTERFACE;
 $CKEditor->config['toolbar'] = $editortoolbar;
 $CKEditor->config['pasteFromWordRemoveFontStyles'] = true;
 $CKEditor->basePath = NV_BASE_SITEURL . NV_EDITORSDIR . '/ckeditor/';
 if (!empty($width))
 {
 $CKEditor->config['width'] = strpos($width, '%') ? $width : intval($width);
 }
 if (!empty($height))
 {
 $CKEditor->config['height'] = strpos($height, '%') ? $height : intval($height);
 }
 $CKEditor->textareaAttributes = array("cols" => 80, "rows" => 10);
 
 $CKEditor->config['filebrowserImageUploadUrl'] = NV_BASE_SITEURL . "index.php?" . NV_LANG_VARIABLE . "=" . NV_LANG_DATA . "&" . NV_NAME_VARIABLE . "=" . $module_name . "&" . NV_OP_VARIABLE . "=papi&uploadimage=1&tokend=" . md5( $global_config['sitekey'] . session_id() );
 
 $val = nv_unhtmlspecialchars($val);
 return $CKEditor->editor($textareaname, $val);
}

Chú ý, nếu ứng dụng của bạn không xây dựng một trình upload ảnh riêng thì ở code trên cần xóa dòng

$CKEditor->config['filebrowserImageUploadUrl'] = NV_BASE_SITEURL . "index.php?" . NV_LANG_VARIABLE . "=" . NV_LANG_DATA . "&" . NV_NAME_VARIABLE . "=" . $module_name . "&" . NV_OP_VARIABLE . "=papi&uploadimage=1&tokend=" . md5( $global_config['sitekey'] . session_id() );

Sau khi có code xử lý ta mã hóa nội dung HTML bằng lệnh

if ( ! empty( $array['description'] ) ) $array['description'] = nv_htmlspecialchars( $array['description'] );

Gọi xử lý và xuất ta Template bằng lệnh

if ( defined( 'NV_EDITOR' ) and nv_function_exists( 'nv_aleditor' ) )
{
 $array['description'] = nv_aleditor( 'description', '100%', '200px', $array['description'] );
}
else
{
 $array['description'] = "<textarea style=\"width:100%; height:200px\" name=\"description\" id=\"description\">" . $array['description'] . "</textarea>";
}

$xtpl->assign( 'DESCRIPTION', $array['description'] );

Trong file TPL xuất nội dung trình soạn thảo bằng code

{DESCRIPTION}

Khi submit from, lấy dữ liệu submit được bằng code

$array['description'] = nv_editor_filter_textarea( 'description', '', NV_ALLOWED_HTML_TAGS );

Chuyển ký tự xuống dòng sang ký tự <br />

$array['description'] = nv_editor_nl2br( $array['description'] );

Cuối cùng biến $array['description'] chính là dữ liệu HTML sẽ được lưu vào CSDL.

Đối với NukeViet 4.x

Cách thực hiện hoàn toàn tương tự NukeViet 3.x trong đó chú ý hàm nv_editor_filter_textarea cần đổi lại thành $nv_Request->get_editor.