第一步:将CKEditor,CKFinder下载好,并解压于网站根目录baixiang下。
第二步,在网站根目录baixiang下建立test.html
在test.html中先引入CKEditor的JS文件和CKFinder的JS文件
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
第三步加载编辑器:在test.html中加入
<textarea id="content" name="content" class="ckeditor">初始化内容...</textarea>
<script type="text/javascript">
if (typeof CKEDITOR == 'undefined') {
document.write('加载CKEditor失败');
}
else {
var editor = CKEDITOR.replace('content');
CKFinder.SetupCKEditor(editor, '../baixiang/ckfinder/'); //ckfinder总目录的相对路径.注意此处的写法,(../根目录(baixiang)/ ckfinder/)
}
</script>
第四步配置CKEditor下的config.js文件:
下面的路径都要带上根目录(baixiang);
config.filebrowserBrowseUrl = '/baixiang/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = '/baixiang/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = '/baixiang/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = '/baixiang/ckfinder/core/connector/asp/connector.asp?command=QuickUpload &type=Files';
config.filebrowserImageUploadUrl = '/baixiang/ckfinder/core/connector/asp/connector.asp?command=QuickUpload &type=Images';
config.filebrowserFlashUploadUrl = '/baixiang/ckfinder/core/connector/asp/connector.asp?command=QuickUpload &type=Flash';
此代码为启用上传图片的功能
第五步修改ckeditor/plugins/image/dialogs/image.js 文件:
// hidden: ture, 为原来的默认值,浏览按钮为不显示。改为 hidden:false,
{type:'button',id:'browse',style:'display:inline-block;margin-top:10px;',align:'center',label:q.lang.common.browseServer,hidden:false,filebrowser:'info:txtUrl'}
第六步修改:/ckfinder/config.asp
(1)查找CheckAuthentication
修改CheckAuthentication = false为true '只适合本机测试,否则很危险
如果挂上互联网,还需检测权限,以我的代码为例
if Session("admin") <> true then
CheckAuthentication = false
else
CheckAuthentication = true
end if
(2)修改baseUrl的值,文件设置上传的保存目录,记得为这个目录开写权限
在根目录下建立上传图片文件夹uploadfiles;
baseUrl = "/baixiang/uploadfiles/" ;说明,baseUrl设置时,也要带上根目录(baixiang);
(3)不用上传组件的话,修改下面的信息;
Images.Add "component", "Auto" 改为 Images.Add "component", "none"
至此,结束。