CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)

CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程)

php

keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还需要下载ckfinder。

首先去官方上下载源代码,然后分别解压缩在网站根目录里(默认ckeditor和ckfinder文件夹里,一般不需要改动)

在所需要的页面插入JS

<script type=”text/网页特效” src=”/ckeditor/ckeditor.JS”></script>

<script type=”text/javascript” src=”/ckfinder/ckfinder.js”> </script>

<form action=”Sroan.php” method=”post”>

<textarea  cols=”80″ id=”editor1″ name=”editor1″ rows=”10″></textarea>

<input type=”submit” value=”Submit” />

<script type=”text/javascript”>
var editor = CKEDITOR.replace(‘timu’);
CKFinder.SetupCKEditor(editor, ‘../ckfinder/’); //ckfinder总目录的相对路径.
</script>

再修改ckfinder/config.php 里CheckAuthentication函数,返回改为ture(默认为fasle)

这样就能够实现上传功能了。

如果上面的方法不行可以试一下

1. 下载安装 CKEditor:
http://ckeditor.com/
解压下载到的CKEditor放到网站的路径中即可
2. 下载安装 CKFinder:
http://ckfinder.com/download
解压下载到的CKFinder放到与CKEditor同一目录中即可
 
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签,所以把textarea放到一个form中,当提交到php服务器端,使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意,因为 CKEditor 要替换 textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。
最简单的方法,直接新建一个test.html文件(和ckeditor、ckfinder处于同一级目录)使用下面的例子修改一下即可。在浏览器里浏览test.html就可以在网页中看到 CKEditor 了,兴奋吧。
 
 
 
 
   CKEditor
 
 
 
 
 
4. 配置CKFinder进行上传图片,Flash等。
 
到这里,点击 "Image" 按钮,在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了,但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录,如upload
(把upload文件夹也放在和ckeditor、ckfinder处于同一级目录,三个目录都位于项目目录下)
其路径为 /upload/
[For Linux: 把其权限设置为php server可读写,最简单的是 chmod 777 upload 这样php server才有权限往里面保存文件.]
 
b. 找到配置文件(ckfinder/config.php)第32行,把 function CheckAuthentication () { return false; }
修改成 function CheckAuthentication() { return true; }
 
c. 找到第63行,把 $baseUrl 的值改成保存上传文件存目录的URL,
如 $baseUrl = '/项目名/upload/';(这里的地址要从项目目录开始的绝对路径,确定上传目录已经存在)
 
d. 找到第82行,删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径 ,(本地测试的时候要从磁盘的跟目录下开始,即C:/或者D:/的直接目录)
如$baseDir = '/Apache2/htdocs/ck/upload/'; (Apache2是D:/盘下的直接目录)
这 是因为resolveUrl($baseUrl)函数不能正常工作。
 
至此,可以使用 CKEditor 和 CKFinder 上传文件了。
 
对上面这个小例子中服务器端的b.php代码:
 
 
header("Content-Type:text/html; charset=utf-8");
$str = $_POST['editor1'];
echo $str;
?>
 
可以看到,在点击submit按钮后,服务器端收到了CKEditor中的内容,并使用echo输出,生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库教程中。然后再读出在相应的页面显示出来。

---------------------------------------------------------------------------------------------------------

fckeditor的上传图片中,有一个可以浏览服务器目录的功能,如果在后台,是可以开放使用的,如果是前台用户访问就不要使用这个功能。
不过浏览图片不是很方便,ckfinder 就很好的简单了这个问题
fckeditor的配制如下:
修改文件:
fckeditoreditorfilemanagerconnectorsphpconfig.php

// $Config['Enabled']改过true,允许上传

 

$Config

[

'Enabled'

]

 =

 true

 ;

 

//$Config['UserFilesPath'] 设置相对于根目录的上传目录,目前来说没有用,因为实际上传在下面的配制中

 

$Config

[

'UserFilesPath'

]

 =

 "/upload/"

;

 

//$Config['UserFilesAbsolutePath']  上传的图片位置,包括根目录

 

$Config

[

'UserFilesAbsolutePath'

]

 =

 '/public/upload/'

 ;

 

 

 

设置ckfinder的config.php

$baseUrl

 =

 '/upload/'

;

 

// 在CheckAuthentication 改为return true,这里可以加入自己的权限判断。

 

function

 CheckAuthentication(

)

 

{

 

 return

 true

;

 

}

程序代码中使用

 $fckeditor

 =

 new

 FCKeditor(

$fckname

)

 ;

 

 $fckeditor

->

BasePath

 =

 '/js/fckeditor/'

 ;

 

//$toolbar_set 设置工具栏 默认值: Default

 

 $fckeditor

->

ToolbarSet

 =

 $toolbar_set

;

 

// $width 宽度

 

 $fckeditor

->

Width

     =

 $width

;

 

// $height 高度

 

 $fckeditor

->

Height

     =

 $height

;

 

//皮肤文件的路径

 

 $fckeditor

->

Config

      =

  array

(

'SkinPath'

=>

$SkinPath

)

;

 

 $fckeditor

->

Value

      =

 $value

;

 

//在fckedior这前使用CKFinder

 

 CKFinder::

SetupFCKeditor

(

 $fckeditor

,

 "/js/ckfinder/"

)

 ;

 

 $fckhtml

 =

 $fckeditor

->

Create

(

)

 ;

下面为详细的c#配置方法

CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得。
把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大小写)
在页面使用 CKEditor:
        <textarea cols="80" id="prcontent" name="content" rows="50">hello world!</textarea>
        <script type="text/javascript">
            CKEDITOR.replace('content', { height: 200, width: 520 });
        </script>
CKEditor 本身不自带上传功能,所以需要配合CKFinder才可以实现上传
第一步:网站需要引用CKFinder的dll(目录:/CKFinder/bin/Release/CKFinder.dll)
第二步:配置CKEditor的config.js (目录:/CKEditor/config.js ) 在CKEDITOR.editorConfig函数里加上,不需要的功能可以去掉
    config.filebrowserBrowseUrl= '/ckfinder/ckfinder.html'; //上传文件时浏览服务文件夹
    config.filebrowserImageBrowseUrl= '/ckfinder/ckfinder.html?Type=Images'; //上传图片时浏览服务文件夹
    config.filebrowserFlashBrowseUrl= '/ckfinder/ckfinder.html?Type=Flash';  //上传Flash时浏览服务文件夹
    config.filebrowserUploadUrl = '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签)
    config.filebrowserImageUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'; //上传图片按钮(标签)
    config.filebrowserFlashUploadUrl= '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'; //上传Flash按钮(标签)
配置完成后CKEditor 就带有上传功能了,但假如上传图片时,图片的文件是用原来图片的名字,想改为随机文件名呢,怎么办?接着看第三步。
 
第三步:修改CKFinder的源码。CKFinder自带有源码,目录:/CKFinde/_source
在VS里新建一个 现在的项目 指向CKFinde/_source/CKFinder.Net.sln
1) 打开/Settings/ConfigFile.cs文件
定位27行,添加一个属性:public bool RandomReName; //随机重命名
定位67行,给刚才的属性赋值:RandomReName = true; //默认值为true
保存关闭文件
2) 打开/Connector/Config.cs文件
定位62行,添加一个属性:
        public bool RandomReName
        {
            get { return Settings.ConfigFile.Current.RandomReName; }
        }
保存关闭文件
3) 打开/Connector/CommandHandlers/FileUploadCommandHandler.cs文件
定位64行,添加一句判断代码:
                        if ( Config.Current.RandomReName)  //使用随机名
                            sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;

保存关闭文件
4) 重新生成项目,把/ckfinder/_source/bin/Debug/CKFinder.dll覆盖/ckfinder/bin/Release/CKFinder.dll或者网站项目去掉之前加入的引用再重新从CKFinder.Net项目里的Dll
最后一步:打开/ckfinder/config.ascx
定位42行,添加一属性:(其实这个加不加都可以的,因为之前有设置默认值,但使用原名时一定要设置为false)
        //上传完毕后使用随机文件名
        RandomReName = true;

保存关闭
好了,到此已经配置成功了,CKEditor 可以有上传功能了。其它的功能的设置,有空再继续研究~
还要提醒一句:CKEditor 和 CKFinder 文件夹里有很多不需要的东西,例如名字带有下划线前辍的,.net项目不需要php,asp的。
如果上传文件出现错误:因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
需要修改config.ascx文件中
public override bool CheckAuthentication()
{
reture false;
}
修改为:
public override bool CheckAuthentication()
{
// 窗体验证时用
 return Request.IsAuthenticated;
//reture true; 不推荐使用
}

时间: 2024-11-18 05:50:09

CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)的相关文章

thinkphp下ckeditor+ckfinder的图片上传配置详解

最新发布的CKFinder 1.4版 已经提供了对CKEditor3.0的支持CKFinder 1.4 下载地址:http://ckfinder.com/CKEditor3.0 下载地址:http://ckeditor.com/ 下载后直接解压得到ckeditor文件夹,包括如下内容: ck配置图片   其中sample为例子,source为源文件,为了减少editor的体积,直接删除.其他你也可删除一些,像语言只留zh-cn.然后将整个文件夹直接拷贝到网站htdocsnewtpPublicJs

上传文件-ckeditor整合ckfinder实现图片上传

问题描述 ckeditor整合ckfinder实现图片上传 这是咋回事??? 解决方案 ckEditor+ckFinder整合实现上传功能黑马程序员_ckeditor+ckfinder实现本地图片上传struts2整合CKEditor和CKFinder实现上传 解决方案二: 你没点击"上传到服务器"这个按钮吧..要先上传才能点击确定

js 百度UEditor图片上传配置及默认使用远程url地址

图片上传配置成功了,图片也上传了,但是有个问题就是图片在保存的时候,使用的是相对地址. 红色部分是现在存在的问题,我想改成下面绿色部分的带有我网站的绝对地址. 在百度搜索了好久,遇到这个问题的不多,但是有个哥们确实也遇到我这个问题,参考: http://blog.csdn.net/javaloverkehui/article/details/8465112 但是他修改的版本属于比较早的版本了.我发现在新版上根本没有这样的配置.或者说配置的地方不一样了. 没办法,我重回百度ueditor的官网,查

CKEditor整合ckfinder实现图片上传

两个东东的下载地址分别为: ckeditor:  http://ckeditor.com/download/ ckfinder:  http://ckfinder.com/download 项目目录结构为:   ckeditor       ---ckeditor       --ckfinder       --test.php 用来测试的PHP文件 2.找到ckfinder目录下的config.php文件打开   1)定位到CheckAuthentication方法,默认此方法只有返回值fa

PHP中Ckeditor+Ckfinder配置图片上传功能

第一:安装配置CKEditor 在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下. 1.  将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/admin/. 第一:安装配置CKEditor ,可改/admin/ckeditor/ckeditor.js来配置编辑器,如字体.背景色.语言 .界面高宽.编辑器按钮分布等  代码如下 复制代码 config.language = 'en'; config.skin =

Yii结合CKEditor实现图片上传功能_php实例

这几天做的一个项目中需要在所见即所得编辑器中实现图片上传的功能,我因为比较喜欢CKEditor的界面而选择了它.虽然有跟CKEditor配合良好的CKFinder,不过这个东东的功能太复杂,简单看了下CKEdtior的文档,发现这个功能还是可以自己实现而不用借助CKFinder的. 下面代码虽然基于Yii Framework的,但是用其他框架或者语言思路却是完全一样的,有需要的童鞋可以参考一下. 首先要让CkEditor出现图片上传的功能,需要配置编辑器的filebrowserImageUplo

php discuz chhome 图片上传swfupload功能

php discuz chhome 图片上传swfupload功能 这上传与discuz来比, 还相差太远. 功能也欠缺.   除了部分内置的url引向,我们改不了之外, 其它的数据都是可以修改的. <?php /*  [UCenter Home] (C) 2007-2008 Comsenz Inc.  $Id: do_swfupload.php 12830 2009-07-22 06:42:32Z zhengqingpeng $ */ if(!defined('IN_UCHOME')) { 

iOS图片上传服务器(ASIHTTPRequest,SpringMVC)

最近开始做自己app的服务器,因为正在参与的公司项目用的是springMVC,干脆拿这个做服务器,iOS端采用第三方鼎鼎大名的ASIHTTPRequest(但是已停更很久),经过一天折腾,终于实现简单的图片上传 配置ASIHTTPRequest,参见 ASIHTTPRequest配置说明 搭建简单的springMVC环境 代码 iOS端: -(void)uploadImgToServer:(UIImage*)image{ ASIFormDataRequest *formDataRequest=[

ASP:利用ASP把图片上传到数据库

ASP(Active Server Pages)是Microsoft很早就推出的一种WEB应用程序解决方案,也是绝大多数从事网站开发人员很熟悉的一个比较简单的编程环境.通过ASP我们可以创建功能强大的动态的WEB应用程序.ASP虽然功能很强大,但有些功能用纯ASP代码完成不了,为了能保证开发出功能更加强大的WEB应用程序,我们可以借助调用COM组件. 在日常工作中,例如开发一个"商品网上销售系统"吧,为了使顾客对商品的外观有所了解,也就是顾客在看商品的文字介绍的同时在文字的旁边有该商品