`

CKEditor上传图片—配置CKFinder

 
阅读更多

来源:http://www.cnblogs.com/leolis/archive/2012/08/29/2662357.html
在网站开发中,如果有发布类似新闻的图文混排需求时,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的引用,具体路径根据自己放置的路径设置,如下:

<script src="../editor/ckeditor/ckeditor.js" type="text/javascript"></script> <script src="../editor/ckfinder/ckfinder.js" type="text/javascript"></script> 
在页面中添加一个textarea,具体代码如下:
<textareaname="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 boolCheckAuthentication返回值改为true,其实也可以根据自身网站的安全需要去更改代码,这里只是为了简单实现,代码如下:
 
publicoverrideboolCheckAuthentication()     {
// 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. 
returntrue;     } 
 
 
并且在public override void SetConfig()方法中找到BaseUrl,这个即为存放上传文件的路径,根据自己的网站进行更改。
整个配置过程就是上面部分,现在可以进行测试了。
 

 

分享到:
评论

相关推荐

    asp使用ckeditor和ckfinder上传图片设置

    在asp中使用ckeditor开启图片上传功能的设置方法: 1、下载asp版本的ckfinder,放到ckeditor目录下 2、修改ckeditor\config.js,加上如下内容: CKEDITOR.editorConfig = function( config ) { config.scayt_...

    ckeditor+ckfinder配置实现图片上传实例

    3. **配置CKFinder与CKEditor**:在CKEditor的配置文件(通常为`config.js`)中,添加以下代码来启用CKFinder: ``` CKEDITOR.editorConfig = function( config ) { config.filebrowserBrowseUrl = 'ckfinder/...

    ckeditor+ckeditor-java+ckfinder

    4. 在JSP页面中插入CKEditor,并配置CKFinder的路径,以便在编辑器中唤起文件管理器。 5. 在服务器端编写处理文件上传、删除等操作的代码,确保与CKFinder的接口匹配。 6. 测试编辑器功能,包括文本编辑、图片上传、...

    整合ckeditor+ckfinder实现图片或文件上传功能

    `ckeditor`是一款知名的开源JavaScript富文本编辑器,而`ckfinder`则是一个与之配合的文件管理器,主要用于上传、管理和选择编辑器中的图片和文件。本文将详细介绍如何在JAVA工程中整合这两款工具,实现图片和文件的...

    ckeditor+ckfinder配置

    3. **配置CKEditor**:在需要使用CKEditor的页面中,引入CKEditor的JavaScript文件,并配置CKFinder的路径。例如: ```html &lt;script src="js/ckeditor/ckeditor.js"&gt; CKEDITOR.replace('editor', { ...

    CKEditor_+_CKFinder_配置

    CKFinder 是一个与 CKEditor 配合使用的文件管理器,允许用户在编辑器中方便地上传、浏览和管理图片、文档等资源。 配置 CKEditor 和 CKFinder 的过程主要包括以下几个步骤: 1. **安装 CKEditor**: - 将 ...

    最新ckeditor_ckfinder整合超完整版 for PHP 附ckeditor完整中文配置

    CKFinder支持多种文件类型,并且可以通过其直观的界面方便地集成到CKEditor中,使得在编辑器内直接插入图片或媒体文件变得简单。 在PHP环境中整合CKEditor和CKFinder,首先需要下载并安装这两个组件。将它们部署到...

    ckeditor和ckfinder配置asp上传图片实例

    4. 配置CKFinder与CKEditor的整合,通常是通过CKEditor的“filebrowserBrowseUrl”和“filebrowserUploadUrl”选项指向CKFinder的URL。 5. 创建或修改ASP脚本来处理文件上传、数据库交互等逻辑。 这个实例提供了一...

    Asp.Net mvc3中ckeditor4.4.0与ckfinder配置上传图片.zip

    本项目是关于如何在ASP.NET MVC3环境中配置CKEditor 4.4.0版本与CKFinder进行图片上传的详细步骤。 首先,`Global.asax`文件是ASP.NET应用程序的全局应用事件处理程序,它定义了应用程序启动、结束、请求开始等关键...

    CKEditor集成CKFinder配置完成插件(附图解)

    3. **配置CKFinder与CKEditor的连接**:在CKEditor的配置文件(通常是`config.js`)中,需要添加CKFinder的配置项,指定CKFinder的位置和使用的语言。例如: ```javascript CKEDITOR.editorConfig = function( ...

    ckeditor4.46+ckfinder2.4+配置文档说明

    CKEditor 是一个富文本编辑器,用于在网页上提供类似桌面应用的文本编辑体验,而 CKFinder 是一个文件管理器,与 CKEditor 配合使用,允许用户方便地上传、管理和插入图片、文档等媒体资源。 CKEditor 4.46 知识点...

    ckeditor+ckfinder配置+操作详解,实现上传图片

    3. **上传接口**:配置CKFinder的上传设置,如允许的文件类型、大小限制和存储路径。 4. **测试和调试**:测试CKEditor中的“插入图片”功能,确保CKFinder能正常打开,用户可以上传图片,并在编辑器中显示。 5. *...

    CKEditor4+ckfinder ASP.NET 支持图片上传

    这个ASP.NET项目是关于如何在CKEditor4中集成ckfinder,以实现图片上传功能的示例。 首先,我们需要了解ASP.NET的基础。ASP.NET是由微软开发的一个Web应用程序框架,用于构建动态网站、Web应用和Web服务。它提供了...

    ckeditor+ckfinder组合下载 (php演示版,2019年最新,绝对好用) ckeditor4+ckfinder3.1

    开发者可以通过 PHP API 来配置CKFinder,如设置上传权限、定义文件类型限制等。 **PHP 配置** 在提供的组合中,CKEditor 和 CKFinder 已经进行了初步的 PHP 配置,这意味着它们可以直接在PHP环境中运行。这为...

    ckeditor与ckfinder(java版)整合,实现图片上传

    - **配置CKFinder的`baseURL`属性**以正确指向文件上传路径。 - **在CKEditor的配置中启用CKFinder插件**。这通常涉及到修改`config.js`文件,例如添加以下配置: ```javascript config.filebrowserBrowseUrl = '/...

    CKEditor3.6.4+CKFinder2.3+配置

    4. **权限设置**:根据应用需求,配置CKFinder的权限设置,如上传大小限制、文件类型检查等。 5. **测试与调试**:在实际环境中测试编辑器和文件管理器的功能,确保上传、浏览和插入文件等功能正常。 在提供的...

    CKEditor控件CKFinder控件和使用说明

    而CKFinder则是一个与CKEditor配套的文件管理工具,用于上传、浏览和管理CKEditor中插入的图片、文件等资源。 CKEditor的核心特性包括: 1. **多语言支持**:CKEditor内置多种语言包,能满足不同地区的用户需求,...

    JASFinder,开源免费的CKEditor图片上传组件,CKFinder的最佳代替品之一

    总的来说,JASFinder是一个面向CKEditor用户的理想选择,它以免费、开源和功能完善的特点,填补了CKFinder在免费解决方案上的空白,为需要在网页中集成图片上传功能的开发者提供了便利。如果你正在寻找一种经济高效...

    ckeditor+ckfinder精简版 ckeditor+ckfinder精简版

    4. 配置CKFinder以连接你的数据库或文件系统,设置权限和访问规则。 5. 测试编辑器和文件管理器的功能,确保它们能正常工作并满足你的需求。 总的来说,CKEditor+CKFinder精简版为开发者提供了一个轻量级但功能实用...

    Ckeditor与ckfinder整合

    此外,关键的一点是要配置CKFinder的路径,确保在编辑器中能够调用它进行文件浏览和上传。例如: ```javascript config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html', config.filebrowserUploadUrl = 'ckfinder...

Global site tag (gtag.js) - Google Analytics