CKEditor上传图片—配置CKFinder
2012-08-29 16:56
405 查看
在网站开发中,如果有发布类似新闻的图文混排需求时,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的引用,具体路径根据自己放置的路径设置,如下:
在页面中添加一个textarea,具体代码如下:
接下来打开ckeditor文件夹下的config.js文件,在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码:
上面的路径也需要根据自己的设置。
然后打开ckfinder文件夹下面的config.ascx文件,为了所有的人都能看到服务器上上传文件夹里面的文件,将函数public override bool CheckAuthentication返回值改为true,其实也可以根据自身网站的安全需要去更改代码,这里只是为了简单实现,代码如下:
并且在public override void SetConfig()方法中找到BaseUrl,这个即为存放上传文件的路径,根据自己的网站进行更改。
整个配置过程就是上面部分,现在可以进行测试了。
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> <script src="../editor/ckfinder/ckfinder.js" type="text/javascript"></script>
在页面中添加一个textarea,具体代码如下:
<textarea name="individual" id="individual" runat="server"></textarea> <script type="text/javascript"> CKEDITOR.replace('individual'); </script>
接下来打开ckeditor文件夹下的config.js文件,在CKEDITOR.editorConfig = function (config) {};方法中添加如下代码:
config.filebrowserImageBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Images'; config.filebrowserFlashBrowseUrl = '../editor/ckfinder/ckfinder.html?Type=Flash'; config.filebrowserUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl = '../editor/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth = '800'; //“浏览服务器”弹出框的size设置 config.filebrowserWindowHeight = '500';
上面的路径也需要根据自己的设置。
然后打开ckfinder文件夹下面的config.ascx文件,为了所有的人都能看到服务器上上传文件夹里面的文件,将函数public override bool CheckAuthentication返回值改为true,其实也可以根据自身网站的安全需要去更改代码,这里只是为了简单实现,代码如下:
public override bool 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 ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); // // ... where Session[ "IsAuthorized" ] is set to "true" as soon as the // user logs on your system. return true; }
并且在public override void SetConfig()方法中找到BaseUrl,这个即为存放上传文件的路径,根据自己的网站进行更改。
整个配置过程就是上面部分,现在可以进行测试了。
相关文章推荐
- PHP 中配置 ckeditor(fckeditor的新版本)+ckfinder ,实现上传图片功能。
- C# ckeditor+ckfinder的图片上传配置
- CKEditor上传图片—配置CKFinder
- PHP中配置Ckeditor+Ckfinder 完成图片上传
- CKEditor+CKFinder的图片上传配置
- asp版ckeditor图片上传配置方法(ckfinder)
- drupal ckeditor模块配置上传图片及文件(IMCE,ckfinder)
- .net_ckeditor+ckfinder的图片上传配置
- Drupal 7 配置ckeditor和ckfinder编辑器实现图片上传--不用wysisyg
- PHP中配置Ckeditor和Ckfinder(实现图片上传)
- ckeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash
- CKEditor上传图片—配置CKFinder
- CKEditor+CKFinder的图片上传配置
- Ckeditor and ckfinder 配置实现截图上传图片到远程服务器
- ckeditor组合ckfinder的配置使用图片上传功能
- 详细配置CKEditor 和 CKFinder 插件上传图片
- CKEditor上传图片—配置CKFinder
- ckfinder,ckeditor 编辑器 上传图片配置
- CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)(转载)
- PHP中配置Ckeditor+Ckfinder 完成图片上传