最近做富文本编辑器，最后选用了 CKeditor，个人更喜欢这个编辑器的风格。本文将不再阐述CKeditor的基础配置，比较的简单，网上例子不少，官方的demo也有。
好，直接进入正题：
1.图片上传
网上有较多的关于CKeditor图片上传的例子，也有CKeditor + CKFinder的例子。 我只使用了CKeditor来实现。
上图是我修改之后的图片上传界面， 首先找到 ckeditor/plugins/image/dialog/image.js
{
id: "Upload",
hidden: 0,
filebrowser: "uploadButton",
label: d.lang.image.upload,
elements: [{
type: "file",
id: "upload",
//label: d.lang.image.btnUpload,
style: "height:40px",
size: 38
},
{
type: "fileButton",
id: "uploadButton",
filebrowser: "info:txtUrl",
label: d.lang.image.btnUpload,
"for": ["Upload", "upload"]
}]
},
修改hidden:0. 这样上传的功能就出来了. 还有两个功能被我隐藏掉了，不去深究。
选择文件以后，点击上传到服务器 调用的URL是什么呢？
这个需要在 config.js里面进行配置：
config.filebrowserImageUploadUrl = getProjectPath() + "/editor/uploadImage";
这里配置的就是后台处理上传图片的URL，我使用的是jfinal.
后台处理完图片以后，最后需要使用流输出：
<script type=\"text/JavaScript\">window.parent.CKEDITOR.tools.callFunction(
'' , '' ,'');</script>
callFunction方法中的三个参数分别为：
第一个参数：CKEditorFuncNum ckeditor上传默认带入的参数 直接通过request.getParameter("CKEditorFuncNum")；获取就可以啦。
第二个参数：URL 图片地址URL
第三个参数：错误信息 假如上传出错或者是在后台判断图片大小等功能， 设置这个值，就可以在上传界面弹提示该信息。 成功上传传空值即可。
CKeditor接受到这个信息，如果URL有值，那么会直接跳到预览的界面了。
这个功能比较的简单。好，看一下最终的效果图。
点击确定按钮，图片就会插入到编辑器的光标处了。双击编辑器中的图片又会弹出 图像信息 这个页面 ，可以手动的设置一下 宽度 高度，还挺方便。
这个功能比较简单，就介绍到这里了。
2.Flash上传 (支持flv的Flash上传)
Flash的上传和图片上传对比起来差不多。好，让我们开始吧。
首先来看一下我的Flash上传功能的图片。
首先，和图片上传一样，先找到 ckeditor/plugins/flash/dialog/flash.js 找到那段代码开启上传的功能。 （参考上面图片上传的示例代码）
然后就是配置config.js了：
config.filebrowserFlashUploadUrl = getProjectPath() + "/editor/uploadFlash";
这里配置的就是处理Flash上传的后台URL了。不再多做解释，继续往下：
处理文件的代码我就不贴了，相信大家都能自己搞定。最主要的是不是我们上传成功以后，需要ckeditor的响应呢？还需要预览给用户看啊。
那么这里呢，和图片上传就不太一样了。
请注意了，这里不仔细看，可能会让你的Flash上传预览失败或者因为找不到视频浏览器崩溃哦。
好，先来看一下，我的Flash上传的plugin目录：
唯一多出来的就是 flvplayer.swf 播放视频的时候就需要借助到它了。网上下载一个即可。
好，继续说如何在后台让ckeditor响应，还是使用流输出 还是那个方法 那段代码 熟悉的味道 哈哈。
<script type=\"text/JavaScript\">window.parent.CKEDITOR.tools.callFunction(
'' , '' ,'');
</script>
第一个参数 和 第三个参数 和图片上传一致，不做解释，需要了解的朋友请看上面.
关键在于第二个参数，需要改动一下：
"ckeditor/plugins/flash/flvplayer.swf?vcastr_file=/" + 项目名 + "视频存放路径/视频名";
这样，ckeditor就能接收到后台传递的信息了。就可以预览视频了。
网上有个哥们也提到说可以在flash.js里面加入这段代码，
就是我注释掉的部分。经我测试，是有问题的，大家慎用。用我的方法，没毛病。 嘿嘿。
不能光说不练啊，直接上效果图：
大家可以看到URL，带有我们刚才说的那段代码，比较重要啊，这里。希望大家能注意。
这里呢，点击确定 就能把视频插入到编辑器里面了。 再附两张效果图：
这样，你的Flash就加入到编辑器里面了。点击
![]()
预览按钮，也不会有问题了。基本上大功告成了。
如果有朋友有需要 我介绍 关于 附件的上传 可以评论 留言。 先给大家上一张附件上传的效果图吧。
功能实现起来其实比较的简单啦，这个功能，我使用了 uploadify来做，因为我需要兼容到IE8.
本来想自己模仿着ckeditor的插件来做一个弹窗的，但是对API不熟，无奈，下面的这个弹窗是我自己做的。
如果大家有更好的建议或者做法，欢迎大家交流。
好叻，时间关系，这篇文章先到此为止了，有点晚了。 希望能对大家有点帮助吧。最主要还是让自己加深一下印象，也留下篇文档。
项目中要求更换富文本编辑器，原来用的是wangEditor，方便简洁，与vue结合较好，但是用户觉得功能太少，于是进行漫长的编辑器更换之路。百度的UEditor满足要求，但是与vue结合的案例几乎没有
到此这篇关于
CKEditor
4结合php实现
上传
图片
功能的文章就介绍到这了,更多相关
CKEditor
4实现
上传
图片
内容请搜索网赚博客http://www.piaodoo.com/以前的文章或继续浏览下面的相关文章希望大家以后多多支持网赚博客http://www.piaodoo.com/！茂名一技http://www.szsyby.net/茂名一技http://www.enechn.com/美文集http://www.tpyjn.cn/手游排行前十名http://www.bjkhrx.com/
ckeditor
图片
上传
，
flash
上传
工具有一些不太方便我们使用的地方，例如点击
上传
时，会有浏览服务器按钮，但是一般用户是不需要浏览服务器的，为了屏蔽这个按钮，可以采取以下步骤：
1、去除
上传
图片
功能中的浏览服务器按钮
打开
ckeditor
\plugins\image\dialogs\image.js文件，搜索browseServer，找到该词第一次出现的位置，在后面添加,style
其中，fileDownload是提供下载服务的servlet的URL，携带两个参数，分别是：path是子文件夹目录名，name是要下载的文件名称。3、修改配置，在config.js增加以下配置语句，指定处理
上传
文件服务的servlet的url是file
Upload
,5、配置文件 增加上面servlet用到的文件存放路径参数，需要与上面下载servlet设计一致，否则
上传
之后无法下载。
ckeditor
4 中的link插件自带有上功能，按照以下步骤简单修改，可以实现文章
上传
附件
的形式供阅读者下载。
1、在页面中引入
ckeditor
核心文件
ckeditor
.js
<script type="text/
java
script" src="
ckeditor
/
ckeditor
.js"></script>
2. 在使用编辑器的地方插入HTML控件
<textarea id="TextArea1" cols="20" rows="2" class="
ckeditor
"...
在web/js/
ckeditor
/config.js配置文件中增加：（其中image
Upload
是下面写的servlet的url）拿到一个项目后台用
ckeditor
4,根据实际需求要添加
上传
图片
功能。4、eclipese热部署自动刷新设置。2、编写servlet处理
图片
上传
。3、配置
上传
文件路径。
在
JAVA
工程项目中配置
CKEditor
4,同时开启其
上传
功能，包括
图片
的
上传
，超链接的中文件
上传
（主要用于正文中的
附件
下载），
flash
上传
。同时不用与CKfinder集成，简单快捷，复用性强。
配置步骤：
另外，
CKEditor
5有的功能，并不包含在预构建版本中，只能自己编译，比如说Simple
upload
adapter，这个组件没有，就没办法
上传
图片
，只能用在一些简单的场合了。另一个，Simple
upload
adapter组件需要服务器支持，也就是需要写一个controller来接收
上传
的文件，这也没什么好说的，只是multipart请求的RequestParam是"
upload
"，而不是"file"，文档里面也没说，是查看了请求包的内容才知道的。这样就可以像预编译的一样，在HTML中进行配置。
