1. Chép toàn bộ thư mục giải nén vào thư mục web root .
2. Vào thư mục "examples" của thư mục vừa copy trên, bạn sẽ thấy rất nhiều file " *.html " và 1 file "index.css" . Mõi file " *.html" nó sẽ cung cấp cho bạn cách đinh dạng khác nhau, ở đây mình chọn file " full mode ... .html " file này mình chọn là vì thấy nó cung cấp khá đầy đủ tính năng, những file " *.html" còn lại bạn không dùng có thể xóa bỏ để giảm dung lượng. Chú trọng phần chữ đỏ.
3. View code file " full mode... .html" sẽ có dạng 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=utf-8" />
<title>KindEditor</title>
<style type="text/css" rel="stylesheet">
form {
margin: 0;
}
.editor {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
<script type="text/javascript" charset="utf-8" src="./../kindeditor.js"></script>
<script type="text/javascript">
KE.show({
id : 'content1',
cssPath : './index.css'
});
</script>
</head>
<body>
<h3>Default Mode</h3>
<form name="example" method="post" action="./../php/demo.php">
<div class="editor">
<textarea id="content1" name="content" tyle="width:530px;height:300px;visibility:hidden;">
<p>
Kind editor is a powerful yet easy to use, online web-base html editor, which allows users to edit web page in WYSIWYG way. It is compatible with IE, Firefox, Chrome, Safari, Opera and other popular browsers over different platforms.<br />
Written in Javascript, Kind editor could be integrated with any backend technology, such as Java, .NET, PHP, ASP and RoR.
Kind editor has been widely used in different CMS(Content Management System), shopping, forum, blog, wiki, email and other web based applications.
With excellent user experience, it is becoming one of the most poplular editors.
</p>
</textarea>
</div>
<input type="button" name="button" value="Formate Text"
onclick="javascript:alert(KE.util.getData('content1'));" />
<input type="button" name="button" value="Plain Text" onclick="javascript:alert(KE.util.getPureData('content1'));" />
<input type="submit" name="button" value="Submit" />
</form>
</body>
</html>
4. Đặt đoạn code sau vào phần " <head>... </head> " của file chứa form nhập liệu :
<style type="text/css" rel="stylesheet"> form { margin: 0; } .editor { margin-top: 5px; margin-bottom: 5px; } </style> <script type="text/javascript" charset="utf-8" src="./../kindeditor.js"></script> // thay doi duong dan theo web root cua ban */ <script type="text/javascript"> KE.show({ id : 'content1', cssPath : './index.css' /* thay doi duong dan chua file inde.css theo web root cua ban */ }); </script>
5. Thay thế form nhập liệu của bạn bằng form sau, chú ý <textarea id="content1" name="content" tyle="width:530px;height:300px;visibility:hidden;"> nên thay đổi phần "width " "height " cho phù hợp, nhớ tên name="" của thẻ " </textarea> </textarea> " ở form nhập liệu lúc đầu của bạn để sau này biết mà gọi biến để lấy giá trị . Sau đó dổi action="./../php/demo.php" như form lúc đầu của bạn.
<form name="example" method="post" action=" ./../php/demo.php"> /* thay doi cho phu hop */
<div class="editor">
<textarea id="content1" name="content" tyle="width:530px;height:300px;visibility:hidden;">
</textarea>
</div>
<input type="button" name="button" value="Formate Text"
:<!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>
<title>KindEditor 3.0</title><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="../examples/index.css" rel="stylesheet" type="text/css" />
<link href="../skins/common/editor.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="ke-content"><?php
if (get_magic_quotes_gpc()) {
echo(stripslashes($_POST['content']));
} else {
echo($_POST['content']);
}
?>
</div><center><br /><br /><input type="button" value="Go Back" onclick="javascript:history.back();" /></center>
</body>
</html>
7. Đặt đoạn code sau vào phần đầu của file mà form " acction = " tới , nhớ thay đổi đường dẫn các file " *.css" cho phù hợp.
<meta http-equiv="content-type" content="text/html; charset=utf-8" />8. Đặt đoạn code sau vào trước phần xuất dữ liệu hoặc trước khi đưa dữ liệu vào table - CSDL của Server, giả sử bạn có tên name="replay_topic" của thẻ " </textarea> </textarea> " ở form nhập liệu lúc đầu , khi đưa vào CCSDL là $_POST['replay_topic'] .
<link href="../examples/index.css" rel="stylesheet" type="text/css" />
<link href="../skins/common/editor.css" rel="stylesheet" type="text/css" />
if (get_magic_quotes_gpc()) {$_POST['replay_topic'] =$tmp;
$tmp=stripslashes($_POST['content']);
} else {
$tmp=$_POST['content'];
}
9. Demo : Khi nào rãnh mình demo sau nha : ))
0 nhận xét:
Đăng nhận xét