Fork me on GitHub
ckEditor + ckFinder

牌编辑器FCK的升级版CKEditor经过重写,提

供了丰富而强大的集成和互动的API。

新版编辑器是完全基于插件,它可以扩展所有部件以符合需求。
FCKeditor升级后的CKEditor去掉了上传功能,只提供了基本的文本编辑功能,上传模块由另一个组件CKFinder来实现。 
换句话说编辑器如果需要上传功能,就需要再下载CKFinder(http://www.ckfinder.com/)。

CKEditor + CKFinder 配置流水账:

CKEditor:
1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ;
2.页面textarea:

[html]<textarea cols=”80″; name=”editor1″ rows=”10″></textarea>;[/html]

CKFinder:
3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ;
4.页面script:(最好textarea之后)

[javascript]
if (typeof CKEDITOR == ‘undefined’) {
document.write(’加载CKEditor失败’);
}
else {
var editor = CKEDITOR.replace(’editor1′);
CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder总目录的相对路径.
}
[/javascript]

整合:
(把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)
5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。

至此配置完毕,如果需要自定义界面,可进行以下的高级修改:

6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码:

[css]
//字体.

config.font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;

Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ;

//工具按钮.

config.toolbar=

[

['Source','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form','Checkbox','Radio','TextField','Textarea','Select','Button',

'ImageButton','HiddenField'],

‘/’,

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar',

'PageBreak'],

‘/’,

['Styles','Format','Font','FontSize'],

['TextColor','BGColor'],

['Maximize','ShowBlocks','-','About']

];

//宽度

config.width = 500;

//高度

config.height = 400;

//皮肤

config.skin=’v2′;

//等等… …
[/css]

经过两天的摸索,终于搞定ckfinder的上传功能,特整理了实现的详细过程和大家分享下.

本人机器系统 windowsxp sp3

开发环境:vs2005 sql2000and2005   没有安装iis

已经调试安装好了ckeditor3.0 , 下一步 我们来集成ckfinder 实现图片或者flash的上传功能。

CKEditor 不具备上传功能,需要集成 CKFinder 才能实现上传功能。

CKFinder 1.4.1.1 CKEditor 3.0.1 进行集成的配置方法:

官方网站:CKFinder(powerful and easy to use Ajax file manager for web browsers)

下载地址:CKFinder 1.4.1.1 for Asp.net(updated 02.10.2009

1.下载 ckfinder_aspnet_1.4.1.1.zip 解压后将ckfinder(放在根目录下)。我的是开发网站的根目录,在根目录下同时还有ckeditor这个文件夹。

2.拷贝ckfinder的bin目录下的CKFinder.dll到vs2005的bin目录下

3.打开 " \ckfinder\config.ascx ",找到BaseUrl,可以看到BaseUrl = "/ckfinder/userfiles/";将其为BaseUrl = "~/ckfinder/userfiles/";
  // 注意“~
  // 以 userfiles 为默认路径,其目录下会自动生成images、flash等子目录。

4、在 ckeditor/config.js 中集成 ckfinder。将以下代码复制到config.js中即可

// 自定义 CKEditor 样式
CKEDITOR.editorConfig = function(config) {
……

CKFinder.SetupCKEditor(null, '../ckfinder/');// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路径选择要正确。
}


5、在 aspx 页面或者 master 模板页 <head> 标签中载入 ckfinder.js:

  <!-- 载入 CKFinder JS 文件 -->
  <script src="../ckfinder/ckfinder.js" type="text/javascript"></script>

 

  <!-- 使用 ckeditor 必须定义 class="ckeditor" -->

本人新闻发布界面部分代码:

<head runat="server">
    <title>新闻发布</title>
     <script language="javascript" type="text/javascript" src="../ckeditor/ckeditor.js"></script>
      <script language="javascript" type="text/javascript" src="../ckfinder/ckfinder.js" ></script>
</head>

本人用的是textarea控件 ,textbox也可以,自行研究~!

 在<body>标签中使用ckfinder:

<textarea id="text1" name="editor1" class="ckeditor" runat="server" rows="10" style="width: 640px" ></textarea>
                   
                      <script language="javascript" type="text/javascript" >
                     CKEDITOR.replace( 'editor1',
   {
    filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
    filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
    filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
    filebrowserUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files',
    filebrowserImageUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images',
    filebrowserFlashUploadUrl : '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
   }
);


                      </script>

注意:绿色的代码错误会导致上传文件时候一点击浏览服务器就产生乱码!


 
 常见错误排除方法:

症状:因为安全原因,文件不可浏览。请联系系统管理员并检查CKFinder配置文件。

 

原因:未设置用户身份验证或者用户未登录

解决办法

到config.ascx中找到如下语句

语句:
public override bool CheckAuthentication()
{
reture false;
}

 

更改为:

语句:
public override bool CheckAuthentication()
{
reture true;
}

这样可以去掉身份验证,这样设置从安全性考虑并不好,但是我的目的是先调试能用!

症状:未知错误

原因:设置不进行用户身份验证,但是 BaseUrl 路径不对。

解决办法 检查BaseUrl是否修改为BaseUrl = "~/ckfinder/userfiles/";

参考:http://hi.baidu.com/%B4%F3%CE%B0/blog/item/5f9ead517faadf858c543087.html

http://blog.csdn.net/ishowing/archive/2009/09/24/4589950.aspx

http://www.cnblogs.com/hudonglin/archive/2009/09/11/1564568.html

http://docs.cksource.com/CKFinder/Developers_Guide/ASP.NET/CKEditor_Integration

官方文档:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide
http://docs.cksource.com/CKFinder/Developers_Guide

posted on 2010-01-12 14:05  HackerVirus  阅读(1823)  评论(1编辑  收藏  举报