ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解
2012-05-27 21:02
399 查看
一、去http://cksource.com/下载这两个东西
二、去http://www.extjs.com/下载ext-2.3.0
三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4，取出解压后的文件夹，真接放到站点根目录，目录结构为：
WEBROOT
｜--ckeditor
｜--finder
｜--ext-2.3.0
｜--js
｜--css
修改ckeditor目录下的config.js如下：
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn'; //配置语言
config.uiColor = 'DFE8F6';
config.skin = 'office2003';
config.height = 320;
config.width = '100%';
config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ;
config.filebrowserUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700'
};
在js目录中加入ExtCkeditor.js：
/****************************************************
* CKEditor Extension
*****************************************************/
Ext.form.CKEditor = function(config){
this.config = config;
Ext.form.CKEditor.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, {
onRender : function(ct, position){
if(!this.el){
this.defaultAutoCreate = {
tag: "textarea",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
CKEDITOR.replace(this.id, this.config.CKConfig);
},
setValue : function(value){
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
CKEDITOR.instances[this.id].setData( value );
},
getValue : function(){
CKEDITOR.instances[this.id].updateElement();
return Ext.form.TextArea.superclass.getValue(this);
},
getRawValue : function(){
CKEDITOR.instances[this.id].updateElement();
return Ext.form.TextArea.superclass.getRawValue(this);
}
});
Ext.reg('ckeditor', Ext.form.CKEditor);
在WEBROOT目录中加入demo3.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="ext-2.3.0/resources/css/ext-all.css"/>
<!-- LIBS -->
<script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-2.3.0/ext-all.js"></script>
<script type="text/javascript" src="js/ExtCkeditor.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
//Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
var tab2 = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 1000,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:350,
//defaults:{bodyStyle:'padding:10px'},
items:[{
title : 'editor_office2003',
layout : 'fit',
items : {
xtype : 'ckeditor',
fieldLabel : 'Editor',
name : 'htmlcode',
CKConfig : {
/* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
customConfig : 'ckeditor/config.js' // This allows you to define the path to a custom CKEditor config file.
}
}
},{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
} ]
} ],
buttons : [ {
text : 'Save'
}, {
text : 'Cancel'
} ]
});
tab2.render(document.body);
});
</script>
</head>
<body>
</body>
</html>
需要修改和调整的地方：
一、提示如下问题
After installed CKFinder 1.4, I always get following error while trying to upload a file
"The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file."
Or in Chinese
"因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件."
解决办法：
1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限
2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true
二、CKfinder的破解
在ckfinder\core\js下的ckfinder_gecko.js和ckfinder_ie.js中查找“en.call(window,qo);”（注找引号内的内容），只能找到一处，屏蔽掉！参考（http://blog.csdn.net/bruceluo92/archive/2009/10/23/4720675.aspx）
三、注意修改一个路径，如果你将WEBROOT设为站点根目录，到这里就结束了，但如果你将站点设为虚拟目录，那么就要修改ckfinder中的
baseUrl = "/ckfinder/userfiles/"
这里使用的是绝对路径，我的办法是加上WEBROOT,即改为
baseUrl = "/WEBROOT/ckfinder/userfiles/"
你也可以想想使用相对路径的办法，但要设准确，否则会出错。
源码参见：
http://e_wsq.download.csdn.net/
二、去http://www.extjs.com/下载ext-2.3.0
三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4，取出解压后的文件夹，真接放到站点根目录，目录结构为：
WEBROOT
｜--ckeditor
｜--finder
｜--ext-2.3.0
｜--js
｜--css
修改ckeditor目录下的config.js如下：
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn'; //配置语言
config.uiColor = 'DFE8F6';
config.skin = 'office2003';
config.height = 320;
config.width = '100%';
config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ;
config.filebrowserUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/asp/connector.asp?command=QuickUpload&type=Flash';
config.filebrowserWindowWidth = '1000';
config.filebrowserWindowHeight = '700'
};
在js目录中加入ExtCkeditor.js：
/****************************************************
* CKEditor Extension
*****************************************************/
Ext.form.CKEditor = function(config){
this.config = config;
Ext.form.CKEditor.superclass.constructor.call(this, config);
};
Ext.extend(Ext.form.CKEditor, Ext.form.TextArea, {
onRender : function(ct, position){
if(!this.el){
this.defaultAutoCreate = {
tag: "textarea",
autocomplete: "off"
};
}
Ext.form.TextArea.superclass.onRender.call(this, ct, position);
CKEDITOR.replace(this.id, this.config.CKConfig);
},
setValue : function(value){
Ext.form.TextArea.superclass.setValue.apply(this,[value]);
CKEDITOR.instances[this.id].setData( value );
},
getValue : function(){
CKEDITOR.instances[this.id].updateElement();
return Ext.form.TextArea.superclass.getValue(this);
},
getRawValue : function(){
CKEDITOR.instances[this.id].updateElement();
return Ext.form.TextArea.superclass.getRawValue(this);
}
});
Ext.reg('ckeditor', Ext.form.CKEditor);
在WEBROOT目录中加入demo3.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample - CKEditor</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script src="js/sample.js" type="text/javascript"></script>
<link href="css/sample.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" href="ext-2.3.0/resources/css/ext-all.css"/>
<!-- LIBS -->
<script type="text/javascript" src="ext-2.3.0/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="ext-2.3.0/ext-all.js"></script>
<script type="text/javascript" src="js/ExtCkeditor.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
// turn on validation errors beside the field globally
//Ext.form.Field.prototype.msgTarget = 'side';
var bd = Ext.getBody();
/*
* ================ Form 5 =======================
*/
bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
var tab2 = new Ext.FormPanel({
labelAlign: 'top',
title: 'Inner Tabs',
bodyStyle:'padding:5px',
width: 1000,
items: [{
layout:'column',
border:false,
items:[{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
name: 'first',
anchor:'95%'
}, {
xtype:'textfield',
fieldLabel: 'Company',
name: 'company',
anchor:'95%'
}]
},{
columnWidth:.5,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
name: 'last',
anchor:'95%'
},{
xtype:'textfield',
fieldLabel: 'Email',
name: 'email',
vtype:'email',
anchor:'95%'
}]
}]
},{
xtype:'tabpanel',
plain:true,
activeTab: 0,
height:350,
//defaults:{bodyStyle:'padding:10px'},
items:[{
title : 'editor_office2003',
layout : 'fit',
items : {
xtype : 'ckeditor',
fieldLabel : 'Editor',
name : 'htmlcode',
CKConfig : {
/* Enter your CKEditor config paramaters here or define a custom CKEditor config file. */
customConfig : 'ckeditor/config.js' // This allows you to define the path to a custom CKEditor config file.
}
}
},{
title:'Personal Details',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false,
value: 'Jack'
},{
fieldLabel: 'Last Name',
name: 'last',
value: 'Slocum'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}]
},{
title:'Phone Numbers',
layout:'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
},{
cls:'x-plain',
title:'Biography',
layout:'fit',
items: {
xtype:'htmleditor',
id:'bio2',
fieldLabel:'Biography'
}
} ]
} ],
buttons : [ {
text : 'Save'
}, {
text : 'Cancel'
} ]
});
tab2.render(document.body);
});
</script>
</head>
<body>
</body>
</html>
需要修改和调整的地方：
一、提示如下问题
After installed CKFinder 1.4, I always get following error while trying to upload a file
"The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file."
Or in Chinese
"因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件."
解决办法：
1. There is no write access for the default upload folder $baseUrl = '/userfiles/'; in ckfinder/config.php.
对于目标文件夹$baseUrl = '/userfiles/';没有写入权限
2. This is maybe because the Return value of Funcation CheckAuthentication() is always FALSE by default in ckfinder/config.php. Change the Validation Condition according to your condition, not recommend to set the return value to true directly.
因为出于安全考虑ckfinder/config.php文件中的CheckAuthentication()函数默认返回值是false, 需要手动修改验证条件, 不建议直接返回true
二、CKfinder的破解
在ckfinder\core\js下的ckfinder_gecko.js和ckfinder_ie.js中查找“en.call(window,qo);”（注找引号内的内容），只能找到一处，屏蔽掉！参考（http://blog.csdn.net/bruceluo92/archive/2009/10/23/4720675.aspx）
三、注意修改一个路径，如果你将WEBROOT设为站点根目录，到这里就结束了，但如果你将站点设为虚拟目录，那么就要修改ckfinder中的
baseUrl = "/ckfinder/userfiles/"
这里使用的是绝对路径，我的办法是加上WEBROOT,即改为
baseUrl = "/WEBROOT/ckfinder/userfiles/"
你也可以想想使用相对路径的办法，但要设准确，否则会出错。
源码参见：
http://e_wsq.download.csdn.net/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解
- 11月17日 阴 星期二 心情一般 asp.net下ckeditor3.0.1和ckfinder_aspnet_1.4.1.1的配置方法
- CKEditor和CKFinder在ASP.NET项目中安装，配置和使用详解
- asp.net下ckeditor3.0.1和ckfinder_aspnet_1.4.1.1的配置方法
- ASP.NET CKEditor和CKFinder配置
- CKEditor 3.0.1 在 asp.net 下进行配置的方法
- CKEditor与CKFinder的配置（ASP.NET环境）
- ckfinder + ckeditor 路径配置详解
- CKEditor+CKFinder+ASP.NET配置
- Asp.net 中配置 CKEditor和CKFinder
- 【转】CKEditor3.0.1在asp.net下进行配置的方法加图片上传
- Asp.net 中配置 CKEditor和CKFinder
- CKEditor+CKFinder+asp.net配置
- CKEditor3.0在asp.net环境下上传文件的配置，集成CKFinder
- asp版ckeditor图片上传配置方法（ckfinder）
- CKEditor 3.6 + CKFinder 2.0在Asp.Net中的配置与基本用法
- Asp.net 中配置 CKEditor和CKFinder
- CKEditor与CKFinder的配置（ASP.NET环境）
- 【转】CKEditor3.0在asp.net环境下上传文件的配置，集成CKFinder
- CKEditor3.0在asp.net环境下上传文件的配置，集成CKFinder