ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解
ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解
一、去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/"
你也可以想想使用相对路径的办法，但要设准确，否则会出错。
源码参见：