[原创视频]ASP整合在线编辑器Ckeditor和Ckfinder教程  

如何让博客满足文章自定义格式以及图文混排的发布需要,答案大家都知道是在线编辑器.现在功能相对比较强大的在线编辑器是ckeditor,前身是fckeditor.

ASP作为Web的基础入门课程,具有上手快,学习简单易掌握的特点.今天给学生讲基础web课程时用到了,就把简单的配置过程录了一下,并且整合了ckfinder.这个例子用于帮助各位初学者正确使用在线编辑器.因为课程的随堂录像,没有声音而且显得不是很紧凑,多多包涵.

具体资源下载请到传送门    ckeditor    ckfinder  选择合适的版本.以下内容是一份配置说明帮助

正式开始,默认跟视频一致放在根目录:
第一步先引入CKEditor的JS文件和CKFinder的JS文件
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>

第二步加载编辑器：
 <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, 'ckfinder/'); //ckfinder总目录的相对路径.
 }
</script>

第三步配置CKEditor下的config.js文件:
 config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
 config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
 config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
 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';
此代码为启用上传图片的功能 

第四步修改ckeditor/plugins/image/dialogs/image.js 文件: 最新版本的ckeditor不需要这步
// 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 = "/upload/" 

其他设置:
1.ckfinder上传图片默认文件名为上传本地的文件名，若有重名会提示是否覆盖，不覆盖的话会以形如a(1).jpg形式保存，下面的方法的作用是生成按上传时间的文件名命名:
修改ckfinder\core\connector\asp\CommandHandler/FileUpload.asp
在115行下加入以下代码
  Dim sTime, sFile
  sTime=now()
  sFile=year(sTime)&month(sTime)&day(sTime)&hour(sTime)&minute(sTime)&second(sTime)
  sFileName = sFile & "." & sExtension

这样就上传后的图片就以上传时间命名
2.破解方法,请尊重版权.CKFinder.js水印修改
将<h4 class='message_content'>替换为<h4 style='display:none;' class='message_content'>，即隐藏h4

祝各位玩的愉快.如有需要可以提供JavaEE,ASP.NET,PHP的整合视频教程.欢迎来电来函洽谈,喵哈哈哈~~

分享到：