准备                                                                                                                                                                

  CKEditor&&CKFinder破解版百度网盘地址:http://pan.baidu.com/s/1qWsDPKC       密码:yydcdut

   

  将CKEditor和CKFinder放在同一文件夹下。

CKEditor实现编辑框                                                                                                                                        

  CKEditor 实际是替换一个textarea标签,所以把textarea放到一个form表单中,当提交到php服务器端,使用$_POST['xxx'] 取得编辑好的数据。

  修改CKEditor的配置文件config.js

 CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.uiColor = '#FFA';
config.skin = 'v2';
config.width = 850;
config.height = 400;
config.toolbar = 'Full';
};

  一个简单的网页实现

 <html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>yyd</title>
</head>
<body>
<form action="post.php" method="post">
<textarea name="editor1">yyd</textarea>
<input type="submit" name="submit" value="Submit" />
</form>
</body> <script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
// 启用 CKEitor 的上传功能,使用了 CKFinder 插件
CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?Type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?Type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
</html>

  实现截图

        

CKFinder实现上传图片                                                                                                                                    

  • 在与CKEditor和CKFinder同目录下创建uploads文件夹
  • 改修config.php文件

  第行的函数

 function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as... // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized']; // ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file. //return false;
return true;
}

  第行,即修改为创建的uploads路径

 $baseUrl = '/CK/plugins/uploads/';

  实现截图

    

  创建post.php文件,将传递过来的POST打印出来

 <?php
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
$data = stripslashes(htmlspecialchars_decode($str));
echo $data;
?>

    

总结和问题的解决                                                                                                                                           

  当我配置完成后,submit提交之后死活都不能显示图片,查看源代码的时候,发现双引号被转义了,觉得很蛋疼。我不知道这个CKEditor转义的还是浏览器转义的,因为就在前几天,我在测试SQL注入的时候就发现明明可以注入的,但死活不出来结果,然后在本机上将password传递过去的值打印出来了,发现是被转义了,表示很蛋疼。所以我在这里用了$data = stripslashes(htmlspecialchars_decode($str));将转义之后再反转义湖区,结果就OK了。

  CKEditor&&CKFinder组合不仅可以上传图片,还可以上传文件等。

转载请注明出处:http://www.cnblogs.com/yydcdut/p/3518102.html

CKEditor && CKFinder 配置的更多相关文章

  1. 网络编辑器插件ckeditor+ckfinder配置

    原帖地址 另外一个 去掉编辑器的下边栏 在config.js中加入: config.removePlugins = 'elementspath'; config.resize_enabled = fa ...

  2. (配置)CKEditor+CKFinder+php上传配置,根据年月命名创建文件夹来存放

    CKEditor+CKFinder+php上传配置 新版本的CKEditor只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder.这里主要记录CKFinder上传的一些参数配置,能够成功上 ...

  3. CKEditor + CKFinder 实现编辑上传图片配置 (二)

    CKEditor + CKFinder 实现编辑上传图片配置 (二) 上传图片时,如果上传的图片过大,默认情况情况下回自动裁剪,代码如图 \ckfinder\config.php 目录下的配置文件co ...

  4. CKEditor + CKFinder 实现编辑上传图片配置

    下载最新版 ckfinder 本人下载的php版本 https://cksource.com/ckfinder/download 下载最新版ckeditor http://ckeditor.com/ ...

  5. CKEditor使用配置方法

    一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src= ...

  6. jsp中如何整合CKEditor+CKFinder实现文件上传

    最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人 ...

  7. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  8. ckeditor的配置及使用

    一.使用方法:1.在页面<head>中引入ckeditor核心文件ckeditor.js<script type="text/javascript" src=&q ...

  9. .Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明

    Net在线编辑器:KindEditor及CkEditor+CkFinder配置说明 一.KindEditor(免费) KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所 ...

随机推荐

  1. 每日踩坑 2018-06-19 AutoMapper简单性能测试

    想使用 AutoMapper 类库来做一些映射到 DTO 对象的操作 但既然类似这样的类库内部是用反射来实现的,那么会比较在意性能. 所以来简单测试一下性能. 关于测试结果呢 emmmm 我是比较吃惊 ...

  2. python语法(二)— 判断

    昨天简单的学习了一些python的一些简单的语句与python的数据类型,今天继续学习python的基础语句 if 语句. 一.if 语句 if 语句语法 if expression: ifSuite ...

  3. SPOJ7586 NUMOFPAL manacher算法

    题目大意: 求一个串中有多少个回文子串 这..... 妥妥的模板题吧.... 对所有的$r[i] / 2$进行求和即可,其中,$r[i]$为以$i$为中心的回文半径 $r[i] / 2$怎么来的,画下 ...

  4. Vue+Express实现前后端分离

    先说明一下缘由,因为自己前段时间在实习,实习期间为了参与项目开发,粗略学习了下Vue.Vuex.Vue-Router,大致会一些基础的.这里也快要做毕业设计了,趁着放假回来的这两天,学习下Node的相 ...

  5. C++之lambda理解

    简介 在C++ Primer中,是这样定义的-一个lambda表达式表示一个可调用的代码单元,可以将其理解为一个未命名的内联函数:与任何函数类似,一个lambda具有一个返回类型,一个参数列表和一个函 ...

  6. 拆分Cocos2dx 渲染项目 总结

    因为只拆分了渲染的内容,所以代码只针对渲染部分进行分析. 代码涉及到这些类: CCImage,对图片的数据进行操作 CCNode,CCSprite,结点类 CCProgram,CCRenderer,C ...

  7. Codeforces Round #350 (Div. 2) C. Cinema 水题

    C. Cinema 题目连接: http://www.codeforces.com/contest/670/problem/C Description Moscow is hosting a majo ...

  8. SDWebImage支持WebP格式图片

    SDWebImage本身就已经支持了webp格式的图片 1.下载libwebp https://github.com/webmproject/libwebp 然后你需要先安装好有homebrew或者m ...

  9. curl多文件上传

    发送: header('Content-type:text/html; charset=utf-8'); //声明编码//模拟批量POST上传文件$url = 'http://test.cm/rece ...

  10. [转贴] start-stop-daemon命令

    转贴自 http://www.lampblog.net/ubuntu/start-stop-daemon%E5%91%BD%E4%BB%A4/ 1.功能作用 启动和停止系统守护程序 2.位置 /sbi ...