CKEditor上传图片—配置CKFinder
2016-01-27 11:26
696 查看
在网站开发中,如果有发布类似新闻的图文混排需求时,CKEditor不失为一个很好的选择,下载地址如下:
http://ckeditor.com/download
它的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码,还有一种方法是使用CKFinder,下载地址如下:
http://ckfinder.com/download
下面详细描述一下使用它们的时候如何配置。
CKEditor我下载的是3.6.4,CKFinder下载的是2.3 for ASP.NET,首先解压所有的文件,然后将ckeditor和ckfinder文件夹放到网站的目录下,可以删除ckeditor和ckfinder文件夹下的_samples、_source 文件夹,将CKFinder.dll添加到站点的bin/文件夹中,然后在网站页面头部添加js的引用,具体路径根据自己放置的路径设置,如下:
并且预览中有一堆火星文,可以修改相应配置删除它。
第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法)
第二种方法:打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
下面研究图片上传
要想出现上传按钮,两种方法
第一种:还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用)
第二种:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet
比如:
config.filebrowserImageUploadUrl = "/Home/Upload";
OK现在基本上是下面这个样子的了
上传图片的Action
http://ckeditor.com/download
它的前身是FCKEditor,随着它的更新,上传图片的功能被分离出去了,现在如果需要实现上传图片,要么自己写代码,还有一种方法是使用CKFinder,下载地址如下:
http://ckfinder.com/download
下面详细描述一下使用它们的时候如何配置。
CKEditor我下载的是3.6.4,CKFinder下载的是2.3 for ASP.NET,首先解压所有的文件,然后将ckeditor和ckfinder文件夹放到网站的目录下,可以删除ckeditor和ckfinder文件夹下的_samples、_source 文件夹,将CKFinder.dll添加到站点的bin/文件夹中,然后在网站页面头部添加js的引用,具体路径根据自己放置的路径设置,如下:
<script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script> <textarea name="individual" id="individual" runat="server"></textarea> <script type="text/javascript"> CKEDITOR.replace('individual'); </script>
并且预览中有一堆火星文,可以修改相应配置删除它。
第一种方法:打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。(由于ckeditor的很多js文件都是压缩过的,格式很难看,很容易删错,所以不推荐此种方法)
第二种方法:打开config.js文件,加入下面一句话
config.image_previewText=' '; //预览区域显示内容
下面研究图片上传
要想出现上传按钮,两种方法
第一种:还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true,而我使用的4.3的是
id:"Upload",hidden:!0,反正改为false就行了,(遗憾的是此种方法对我这个版本不起作用)
第二种:打开config.js文件,加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet
比如:
config.filebrowserImageUploadUrl = "/Home/Upload";
OK现在基本上是下面这个样子的了
上传图片的Action
public ActionResult Upload(string CKEditorFuncNum) { HttpPostedFileBase file= Request.Files[0]; string exstenname = Path.GetExtension(file.FileName); string direname = Server.MapPath("/Resource/upload/"); if (!Directory.Exists(direname)) { Directory.CreateDirectory(direname); } string filename = DateTime.Now.ToFileTime().ToString() + exstenname; file.SaveAs(direname + filename); string uploadpath = "/Resource/upload/" + filename; string result = @"<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction('" + CKEditorFuncNum + "','" + uploadpath + "','');</script>"; Response.Write(result); return Content("ok");
相关文章推荐
- 转 Android学习笔记: 学习过程中碰到的一些问题及解决方法
- cscope以绝对路径生成cscope.files
- Android中Handler Runnable与Thread的区别详解
- openstack:nova中“从镜像启动(创建一个新卷)”创建虚拟机的流程
- 详解Android动画之 属性动画(Property Animation) 完全解析 (上)
- Crontab的格式
- android图片素材参考
- 知乎抓图python脚本
- iOS UITextField 只能输入数字和小数点,只能有两位小数
- Power of Two ----- 判断一个数是不是2的幂
- 邓白氏编码 申请
- Crontab的格式
- Crontab的格式
- CI框架 -- 自动加载资源
- TabLayout + ViewPager + Fragment 实现布局
- ALAssetsLibrary 读取所有照片
- 播放gif控件 GifMovieView.java
- Label根据文本内容自动计算行高
- shell脚本-实现网站自动登录
- MyEclipse中SVN的使用方法