准备
CKEditor&&CKFinder破解版百度网盘地址：http://pan.baidu.com/s/1qWsDPKC 密码：yydcdut
将CKEditor和CKFinder放在同一文件夹下。
CKEditor实现编辑框
CKEditor 实际是替换一个textarea标签，所以把textarea放到一个form表单中，当提交到php服务器端，使用$_POST['xxx'] 取得编辑好的数据。
修改CKEditor的配置文件config.js
1 CKEDITOR.editorConfig = function( config ) 2 { 3 config.language = 'zh-cn'; 4 config.uiColor = '#FFA'; 5 config.skin = 'v2'; 6 config.width = 850; 7 config.height = 400; 8 config.toolbar = 'Full'; 9 };
一个简单的网页实现
1 <html> 2 <head> 3 <meta http-equiv="Content-type" content="text/html; charset=UTF-8"> 4 <title>yyd</title> 5 </head> 6 <body> 7 <form action="post.php" method="post"> 8 <textarea name="editor1">yyd</textarea> 9 <input type="submit" name="submit" value="Submit" /> 10 </form> 11 </body> 12 13 <script src="ckeditor/ckeditor.js"></script> 14 <script type="text/javascript"> 15 // 启用 CKEitor 的上传功能，使用了 CKFinder 插件 16 CKEDITOR.replace( 'editor1', { 17 filebrowserBrowseUrl : 'ckfinder/ckfinder.html', 18 filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?Type=Images', 19 filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?Type=Flash', 20 filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', 21 filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', 22 filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash' 23 }); 24 </script> 25 </html>
实现截图
CKFinder实现上传图片
- 在与CKEditor和CKFinder同目录下创建uploads文件夹
- 改修config.php文件
第21行的函数
1 function CheckAuthentication() 2 { 3 // WARNING : DO NOT simply return "true". By doing so, you are allowing 4 // "anyone" to upload and list the files in your server. You must implement 5 // some kind of session validation here. Even something very simple as... 6 7 // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized']; 8 9 // ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the 10 // user logs in your system. To be able to use session variables don't 11 // forget to add session_start() at the top of this file. 12 13 //return false; 14 return true; 15 }
第66行，即修改为创建的uploads路径
1 $baseUrl = '/CK/plugins/uploads/';
实现截图
创建post.php文件，将传递过来的POST打印出来
1 <?php 2 header("Content-Type:text/html; charset=utf-8"); 3 $str = $_POST['editor1']; 4 $data = stripslashes(htmlspecialchars_decode($str)); 5 echo $data; 6 ?>
总结和问题的解决
当我配置完成后，submit提交之后死活都不能显示图片，查看源代码的时候，发现双引号被转义了，觉得很蛋疼。我不知道这个CKEditor转义的还是浏览器转义的，因为就在前几天，我在测试SQL注入的时候就发现明明可以注入的，但死活不出来结果，然后在本机上将password传递过去的值打印出来了，发现是被转义了，表示很蛋疼。所以我在这里用了$data = stripslashes(htmlspecialchars_decode($str));将转义之后再反转义湖区，结果就OK了。
CKEditor&&CKFinder组合不仅可以上传图片，还可以上传文件等。