Bài 8: Sử dụng CKEditor để soạn thảo trong PHP

Việc soạn thảo trong PHP là 1 kĩ thuật hết sức quan trọng. Vì vậy hôm nay hocweb.com.vn sẽ giúp các bạn sử dụng kĩ thuật CKEditor để soạn thảo trong PHP này 1 cách chi tiết
Đầu tiên ta download CKEditor ở trang web sau ckeditor.com
Giao diện trang web download như sau:

Sau khi download xong ta giải nén source ckeditor và copy vào htdocs/folder chứa web. Để chạy được source này ta test ví dụ sau do ckeditor đã hỗ trợ (file _posteddata.php) có trong source đã download về. Ta cũng chép file này vào thư mục gốc. Nội dung file này như sau:

<!DOCTYPE
 html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
/*
Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights 
reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sample — CKEditor</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" 
/>
	<link type="text/css" rel="stylesheet" href="sample.css" />
</head>
<body>
	<h1 class="samples">
		CKEditor — Posted Data
	</h1>
<table border="1" cellspacing="0" id="outputSample">
		<colgroup><col width="100" /></colgroup>
		<thead>
<tr>
				<th>Field Name</th>
				<th>Value</th>
			</tr>
</thead>
<?php

if ( isset( $_POST ) )
	$postArray = &$_POST ;			// 4.1.0 or later, use $_POST
else
	$postArray = &$HTTP_POST_VARS ;	// prior to 4.1.0, use 
HTTP_POST_VARS

foreach ( $postArray as $sForm => $value )
{
	if ( get_magic_quotes_gpc() )
		$postedValue = htmlspecialchars( stripslashes( $value ) ) ;
	else
		$postedValue = htmlspecialchars( $value ) ;

?>
<tr>
			<th style="vertical-align: top"><?php echo 
htmlspecialchars($sForm); ?></th>
			<td><pre class="samples"><?php echo 
$postedValue?></pre>
</td>
		</tr>
<?php
}
?>
	</table>
<div id="footer">
		<hr />
		<p>
CKEditor - The text editor for the Internet - <a class="samples" 
href="http://ckeditor.com/">http://ckeditor.com</a>
		</p>
<p id="copy">
Copyright © 2003-2011, <a class="samples" 
href="http://cksource.com/">CKSource</a> - Frederico Knabben. 
All rights reserved.
		</p>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php

For licensing, see LICENSE.html or http://ckeditor.com/license

<head>

<title>Sample — CKEditor</title>

</head>

<body>

CKEditor — Posted Data

</h1>

<thead>

<tr>

<th>Field Name</th>

<th>Value</th>

</tr>

</thead>

<?php

if ( isset( $_POST ) )

$postArray = &$_POST ; // 4.1.0 or later, use $_POST

else

$postArray = &$HTTP_POST_VARS ; // prior to 4.1.0, use HTTP_POST_VARS

foreach ( $postArray as $sForm => $value )

{

if ( get_magic_quotes_gpc() )

$postedValue = htmlspecialchars( stripslashes( $value ) ) ;

else

$postedValue = htmlspecialchars( $value ) ;

<tr>

</tr>

<?php

}

</table>

<hr />

<p>

CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>

</p>

</p>

</div>

</body>

</html>

Ta bắt đầu test hoạt động của CKeditor bằng 2 cách:
Cách 1: dùng CKEDITOR.replace(‘nameofcontrol’); (dùng Ajax để show ckeditor)
Cụ thể ta làm giao diện sau:

giao dien cach 1 Bài 8: Sử dụng CKEditor để soạn thảo trong PHP

Code HTML của giao diện này như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>

<body>
<form action="_posteddata.php" method="post">
<textarea name="tomtat" cols="" rows="" >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

//<![CDATA[

// This call can be placed at any point after the

// <textarea>, or inside a <head><script> in a

// window.onload event handler.

// Replace the <textarea id="editor"> with an CKEditor

// instance, using default configurations.

CKEDITOR.replace( 'tomtat' );

//]]>

</script>

</form>

</body>

</html>

Cách 2: Dùng PHP

<?php
// Include the CKEditor class.
include_once "ckeditor/ckeditor.php";

// Create a class instance.
$CKEditor = new CKEditor();

// Path to the CKEditor directory.
$CKEditor->basePath = '/ckeditor/';

// Replace a textarea element with an id (or name) of "textarea_id".
//$CKEditor->replace("tomtat");
$CKEditor->replaceall();

?>

<?php

// Include the CKEditor class.

include_once "ckeditor/ckeditor.php";

// Create a class instance.

$CKEditor = new CKEditor();

// Path to the CKEditor directory.

$CKEditor->basePath = '/ckeditor/';

// Replace a textarea element with an id (or name) of "textarea_id".

//$CKEditor->replace("tomtat");

$CKEditor->replaceall();

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<body>

<?php

// Include the CKEditor class.

include_once "ckeditor/ckeditor.php";

// Create a class instance.

$CKEditor = new CKEditor();

// Path to the CKEditor directory.

$CKEditor->basePath = '/ckeditor/';

// Replace a textarea element with an id (or name) of "textarea_id".

//$CKEditor->replace("tomtat");

$CKEditor->replaceall();

</form>

<?php

if(isset($_POST["tomtat"]))

echo stripslashes($_POST["tomtat"]);

if(isset($_POST["tomtat1"]))

echo $_POST["tomtat1"];

</body>

</html>

Nếu có thắc mắc về bài viết các bạn vui lòng comment bên dưới nhé. Chúc các bạn thành công.
Xem thêm tại http://hocweb.com.vn/category/hocweb/php-mysql/php-co-ban/
----------------------------------------------------------------------------------------------------------------------------------------------------------
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!