asp.net mvc中ckeditor+ckfinder的配置方法（1）
2011-05-09 23:25
639 查看
开源网页编辑软件FCKEditor在09年发布更新到3.0，并改名为CKEditor。改进后的ckeditor更加模块话，配置更加灵活，和以前的fckeditor使用方式上也有所不同。在我的mvc项目中由于要用到 ckeditor，特意研究了下它的使用方法，写下来和大家分享。
我用的是最新版本的：ckeditor_3.0.1 下载地址：http://ckeditor.com/
下载后直接解压得到ckeditor文件夹，包括如下内容：
其中sample为例子，source为源文件，为了减少editor的体积，直接删除。然后将整个文件夹直接拷贝到网站的根目录下.
在你需要使用editor控件的页面头部添加：
[/code]
把文件夹中的bin目录下的dll文件添加到网站的引用中，防止出现找不到类的错误。
打开config.ascx，修改public override bool CheckAuthentication()
{
reture false；//改为return true；
}此处修改是为了有权限上传。
补充：
要自己配置eidtor的外观，可打开eidtor文件夹下的：config.js文件进行配置。
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// config.width = 200;
};
此处配置是针对网站中所有页面的editor，如单个页面需要单独配置，直接在页面中写配置代码，示例如下：
CKEDITOR.config.height = 400;[/code]
工作进展有点慢，但我没偷懒。只是有些东西没有接触过，所以要慢慢摸索。总的来说，是缺乏经验。
下午好像发现了jquery的一个不足之处，也不知道是不是我自己的原因。我在div里面放了一个tableMain，然后在tableMain里再嵌套了一个tableData。当我使用jquery的$(“#td_1”).className=”td_sel”时，发现$(“#td_1”)返回的是underfined。而使用document.getElementById(“td_1”) .className=”td_sel”，则一切正常。【注：此问题请关注4楼及5楼回复】
今天做到了文章发布这个模块，重点是设置编辑器。在网上搜索了一下fckeditor，结果出来好多条信息都说fckeditor已经升级为ckeditor，一时还不相信，以为是ckeditor在借fckeditor炒作，后来，当我看到“http://fckeditor.net/的域名已经转向http://ckeditor.com/”时，才相信这是真的。
下载了最新版的CKEditor 3.0.1，这是我的个人习惯，在条件允许的前提下，一切都要用最新版的。
按照http://ckeditor.com.cn/docs/的提示，在网页上配置好了CKEditor，在浏览器中查看，感觉CKEditor的界面确实非常美观，可当我兴高采烈的想要尝试一下图片上传功能时，却没有看到上传图片的按钮。
继续在网上搜索，结论是“CKEditor 本身不具备上传功能，需要集成 CKFinder 才能实现上传功能”。我最讨厌带插件的东西了，但目前的情形下，我只能选择忍。然后告诉自己：不就是集成一个插件吗？那就集成吧。
接着下载了CKFinder 1.4.1.1 for Asp.net，解压后，将ckfinder文件夹放到项目根目录下——因为网上的很多资料都说，最好把CKEditor和CKFinder放在同一级目录下。而这样一来，我们的项目里就会平白无故的多出两个文件夹来。我本人是有代码洁癖的，我觉得，留一个文件夹，以示对作者的尊重，这样就足够了。要留两个，会让我觉得很不舒服。
下载完之后就下班了，剩下的是回到家里吃了晚饭之后做的。
在将CKFinder集成到CKEditor之前，我们还要对CKFinder进行一些配置。聪明的朋友应该很容易想到，既然是上传文件的插件，要配置的东西多半是上传文件的路径。
CKFinder默认的上传路径是在其本身目录下的userfiles文件夹，不过，我已经将CKFinder放到CKEditor文件夹里了，要是把图片再存放到userfiles里面，系统就得绕过三层文件夹去找文件或图片了，于是，我打算将图片上传到项目根目录下的upFile文件夹里。要实现这一功能，需要修改CKFinder下的config.ascx文件，将BaseUrl = "/ckfinder/userfiles/"修改为BaseUrl = "~/upFile/"。然后，将CKFinder/bin文件夹下的CKFinder.dll文件剪切到系统项目的bin文件夹里。或者通过添加引用的方式，将CKFinder.dll引入到项目中。接下来，我们就可以使用带有文件上传功能的CKEditor了：
把CKFinder文件夹放到CKEditor文件夹内，在页面中，引入两者的js文件：
<script src="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascript"></script>
至于将编辑器引用到控件上，网上有如下两种方法：
一是使用客户端控件textarea：
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</script>
二是使用服务器端控件textbox：
Code
个人觉得，既然是asp.net的程序，那就用服务器端的控件吧。尽管运行效率比客户端控件要慢一点，但开发效率要快一些。而且，作为程序员，我们总是喜欢是尝试所有的可能性，然后再选择自己喜欢的那一种。
其实，这里也可以不使用Text='<%# Bind("info") %>'来对控件进行赋值，直接在后置代码中使用
this.txtContent.Text=”初始值”
也是可以的。取值的时候，也可以直接使用如下代码：
CKFinder和CKEditor 的代码。当我直接运行带有编辑器的页面时，编译器提示如下错误：
string content= this.txtContent.Text
注意：TextMode="MultiLine"属性必不可少，否则取到的将是空值。
在调试程序之前，我没有精简
命名空间“System.Web.UI.Design”中不存在类型或命名空间名称“ControlDesigner”(是缺少程序集引用吗?)
出错的地方在ckeditor\ckfinder\_source\FileBrowserDesigner.cs的第19行，于是，索性把文件精简一下：
第一步，精简ckeditor ：将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件；
第二步，精简ckfinder：将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。
这里请注意js代码的第二行：CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');，这里的“http://www.cnblogs.com/ckeditor/ckfinder/”是ckfinder与当前页面的相对路径，请大家不要直接复制粘贴代码，否则在上传图片时，可能会出现如下错误：
说明: HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。
请求的URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
所以，如果您不想同我一样把ckfinder放到ckeditor文件夹里，那也没关系，只要你在这里把路径修改填写正确就可以了。
我以为这样就算是做完了所有的工作了，但当我上传图片时，却又弹出了如下的提示信息：
因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件。
没办法呀，俗话说，好事多磨。我又只能去请教最好的老师——百度了。复制上面的提示信息到百度搜索框，回车后找到了一条关于PHP整合ckeditor的帖子，对比了一下，抱着试一试的心态，居然把这样问题解决了。方法是这样的：
修改CKFinder下的config.ascx文件，将public override bool CheckAuthentication()函数的返回值由return false修改为return true。
再次测试，图片上传成功！
摘自 网络
相关补充：
使用方法:
一.引用js脚本
<script src="/Content/ckeditor_3.4/ckeditor.js" type="text/javascript"></script>
<script src="/Content/ckfinder_aspnet_2.0.1/ckfinder.js" type="text/javascript"></script>
二.调用ckeditor:使用class方法调用ckeditor
<%=html.textarea("content", new="" style="width:98%;height:300px;" class="ckeditor">
三.在ckeditor中集成ckfinder:在ckeditor的config中添加
//在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
var ckfinderPath = "/Content/ckfinder_aspnet_2.0.1"; //ckfinder路径
config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder.html';
config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = ckfinderPath +
'/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
四.取消ckfinder上传文件验证
public override bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); //自动设置的授权用户确认，在授权用户登录之后添加Session["IsAuthorized"]==true
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs on your system.
//return false; 也可直接改为true,若有必要,自行添加验证
return true;
}
为了安全性的考虑可以在这里加入用户验证,根据用户权限,确定是否有权限上传文件.
解决方法很简单就是在用户登录时加入是否可上传文件的Session标志。其实Fckeditor已经写好了。直接把验证函数CheckAuthentication()中的注释段中
return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
注释去掉。在登录成功加入Session[“IsAuthorized”] = true;就可以了。
(非必要)五.修改上传文件名
修改ckfinder的源代码，找到Connector\CommandHandlers\FileUploadCommandHandler.cs这个文件，定位到:csharp 代码
string sExtension = System.IO.Path.GetExtension( oFile.FileName );
sExtension = sExtension.TrimStart( '.' );
在下面加一行代码:
sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;
我用的是最新版本的：ckeditor_3.0.1 下载地址：http://ckeditor.com/
下载后直接解压得到ckeditor文件夹，包括如下内容：
其中sample为例子，source为源文件，为了减少editor的体积，直接删除。然后将整个文件夹直接拷贝到网站的根目录下.
在你需要使用editor控件的页面头部添加：
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> 在页面相应位置上添加：[code]<textarea name="editor1"></textarea>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
注意：js代码一定要写在textarea后
其实可以这样理解editor控件只是对textarea做了一个漂亮的包装，我们的输入其实都在上面的texarea中，最终也是通过textarea
提交到服务器端。
知道这些，服务器端代码就太简单了：
[AcceptVerbs(HttpVerbs.Post)]
[ValidateInput(false)]
public ActionResult Create(FormCollection collection)
{
blog.Content = collection["editor1"];
。。。
}
collection["editor1"]即可取得editor中的输入。这里需要注意的是由于textarea中有特殊字符，出于
安全原因，默认情况mvc框架不允许提交的，应在相应方法上加上[ValidateInput(false)]属性。效果如下：
还是相当不错的。
新的editor中去除了上传功能，也就是说我们不能通过上传插入图片、flash了。如图：editor中的插入图片对话框并没有提供上传功能：
幸好有个插件ckfinder可以辅助我们完成以下功能，插件的下载地址同样在 http://ckeditor.com/ 最新版本：ckfinder_aspnet_1.4.1.1
解压后，得到一个名为ckfinder的文件夹，同样删除掉source、sample目录（原因同上），拷贝到网站根目录下。如图：
注意：这里还有些配置必须要做：[/code]
把文件夹中的bin目录下的dll文件添加到网站的引用中，防止出现找不到类的错误。
打开config.ascx，修改public override bool CheckAuthentication()
{
reture false；//改为return true；
}此处修改是为了有权限上传。
接下来就要把ckfinder集成到ckeditor中了，代码如下：
var editor = CKEDITOR.replace('editor1');
CKFinder.SetupCKEditor(editor, '/ckfinder/');
当然，在页面相应位置引用script代码是必不可少的。
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
好了，最后一步了，由于ckfinder不是免费的，所以默认情况下会在上传页面中有红色的广告提示，虽然不影响使用，但总是觉得
不爽。
去除方法如下：找到ckfinder/core/js/ckfinder_ie.js及ckfinder_gecko.js，将其中的en.call(window,qo); 代码注释或直接删除。
至此我们的ckfinder全部配置完毕，运行效果如下：
补充：
要自己配置eidtor的外观，可打开eidtor文件夹下的：config.js文件进行配置。
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
// config.width = 200;
};
此处配置是针对网站中所有页面的editor，如单个页面需要单独配置，直接在页面中写配置代码，示例如下：
CKEDITOR.config.height = 400;[/code]
工作进展有点慢，但我没偷懒。只是有些东西没有接触过，所以要慢慢摸索。总的来说，是缺乏经验。
下午好像发现了jquery的一个不足之处，也不知道是不是我自己的原因。我在div里面放了一个tableMain，然后在tableMain里再嵌套了一个tableData。当我使用jquery的$(“#td_1”).className=”td_sel”时，发现$(“#td_1”)返回的是underfined。而使用document.getElementById(“td_1”) .className=”td_sel”，则一切正常。【注：此问题请关注4楼及5楼回复】
今天做到了文章发布这个模块，重点是设置编辑器。在网上搜索了一下fckeditor，结果出来好多条信息都说fckeditor已经升级为ckeditor，一时还不相信，以为是ckeditor在借fckeditor炒作，后来，当我看到“http://fckeditor.net/的域名已经转向http://ckeditor.com/”时，才相信这是真的。
下载了最新版的CKEditor 3.0.1，这是我的个人习惯，在条件允许的前提下，一切都要用最新版的。
按照http://ckeditor.com.cn/docs/的提示，在网页上配置好了CKEditor，在浏览器中查看，感觉CKEditor的界面确实非常美观，可当我兴高采烈的想要尝试一下图片上传功能时，却没有看到上传图片的按钮。
继续在网上搜索，结论是“CKEditor 本身不具备上传功能，需要集成 CKFinder 才能实现上传功能”。我最讨厌带插件的东西了，但目前的情形下，我只能选择忍。然后告诉自己：不就是集成一个插件吗？那就集成吧。
接着下载了CKFinder 1.4.1.1 for Asp.net，解压后，将ckfinder文件夹放到项目根目录下——因为网上的很多资料都说，最好把CKEditor和CKFinder放在同一级目录下。而这样一来，我们的项目里就会平白无故的多出两个文件夹来。我本人是有代码洁癖的，我觉得，留一个文件夹，以示对作者的尊重，这样就足够了。要留两个，会让我觉得很不舒服。
下载完之后就下班了，剩下的是回到家里吃了晚饭之后做的。
在将CKFinder集成到CKEditor之前，我们还要对CKFinder进行一些配置。聪明的朋友应该很容易想到，既然是上传文件的插件，要配置的东西多半是上传文件的路径。
CKFinder默认的上传路径是在其本身目录下的userfiles文件夹，不过，我已经将CKFinder放到CKEditor文件夹里了，要是把图片再存放到userfiles里面，系统就得绕过三层文件夹去找文件或图片了，于是，我打算将图片上传到项目根目录下的upFile文件夹里。要实现这一功能，需要修改CKFinder下的config.ascx文件，将BaseUrl = "/ckfinder/userfiles/"修改为BaseUrl = "~/upFile/"。然后，将CKFinder/bin文件夹下的CKFinder.dll文件剪切到系统项目的bin文件夹里。或者通过添加引用的方式，将CKFinder.dll引入到项目中。接下来，我们就可以使用带有文件上传功能的CKEditor了：
把CKFinder文件夹放到CKEditor文件夹内，在页面中，引入两者的js文件：
<script src="http://www.cnblogs.com/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/ckeditor/ckfinder/ckfinder.js" type="text/javascript"></script>
至于将编辑器引用到控件上，网上有如下两种方法：
一是使用客户端控件textarea：
<textarea rows="20" cols="40" name="txtContent" id="txtContent"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace('txtContent');
CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');
</script>
二是使用服务器端控件textbox：
Code
个人觉得，既然是asp.net的程序，那就用服务器端的控件吧。尽管运行效率比客户端控件要慢一点，但开发效率要快一些。而且，作为程序员，我们总是喜欢是尝试所有的可能性，然后再选择自己喜欢的那一种。
其实，这里也可以不使用Text='<%# Bind("info") %>'来对控件进行赋值，直接在后置代码中使用
this.txtContent.Text=”初始值”
也是可以的。取值的时候，也可以直接使用如下代码：
CKFinder和CKEditor 的代码。当我直接运行带有编辑器的页面时，编译器提示如下错误：
string content= this.txtContent.Text
注意：TextMode="MultiLine"属性必不可少，否则取到的将是空值。
在调试程序之前，我没有精简
命名空间“System.Web.UI.Design”中不存在类型或命名空间名称“ControlDesigner”(是缺少程序集引用吗?)
出错的地方在ckeditor\ckfinder\_source\FileBrowserDesigner.cs的第19行，于是，索性把文件精简一下：
第一步，精简ckeditor ：将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件；
第二步，精简ckfinder：将 _samples、_source 文件夹删除，lang 目录下可以只保留en.js、zh.js、zh-cn.js 三个语言文件。
这里请注意js代码的第二行：CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');，这里的“http://www.cnblogs.com/ckeditor/ckfinder/”是ckfinder与当前页面的相对路径，请大家不要直接复制粘贴代码，否则在上传图片时，可能会出现如下错误：
说明: HTTP 404。您正在查找的资源(或者它的一个依赖项)可能已被移除，或其名称已更改，或暂时不可用。请检查以下 URL 并确保其拼写正确。
请求的URL: /admin/ckeditor/ckfinder/core/connector/aspx/connector.aspx
所以，如果您不想同我一样把ckfinder放到ckeditor文件夹里，那也没关系，只要你在这里把路径修改填写正确就可以了。
我以为这样就算是做完了所有的工作了，但当我上传图片时，却又弹出了如下的提示信息：
因为安全原因,文件不可浏览. 请联系系统管理员并检查CKFinder配置文件。
没办法呀，俗话说，好事多磨。我又只能去请教最好的老师——百度了。复制上面的提示信息到百度搜索框，回车后找到了一条关于PHP整合ckeditor的帖子，对比了一下，抱着试一试的心态，居然把这样问题解决了。方法是这样的：
修改CKFinder下的config.ascx文件，将public override bool CheckAuthentication()函数的返回值由return false修改为return true。
再次测试，图片上传成功！
摘自 网络
相关补充：
使用方法:
一.引用js脚本
<script src="/Content/ckeditor_3.4/ckeditor.js" type="text/javascript"></script>
<script src="/Content/ckfinder_aspnet_2.0.1/ckfinder.js" type="text/javascript"></script>
二.调用ckeditor:使用class方法调用ckeditor
<%=html.textarea("content", new="" style="width:98%;height:300px;" class="ckeditor">
三.在ckeditor中集成ckfinder:在ckeditor的config中添加
//在 CKEditor 中集成 CKFinder，注意 ckfinder 的路径选择要正确。
var ckfinderPath = "/Content/ckfinder_aspnet_2.0.1"; //ckfinder路径
config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder.html';
config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder.html?type=Images';
config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder.html?type=Flash';
config.filebrowserUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = ckfinderPath +
'/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = ckfinderPath + '/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
四.取消ckfinder上传文件验证
public override bool CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
//
// return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true ); //自动设置的授权用户确认，在授权用户登录之后添加Session["IsAuthorized"]==true
//
// ... where Session[ "IsAuthorized" ] is set to "true" as soon as the
// user logs on your system.
//return false; 也可直接改为true,若有必要,自行添加验证
return true;
}
为了安全性的考虑可以在这里加入用户验证,根据用户权限,确定是否有权限上传文件.
解决方法很简单就是在用户登录时加入是否可上传文件的Session标志。其实Fckeditor已经写好了。直接把验证函数CheckAuthentication()中的注释段中
return ( Session[ "IsAuthorized" ] != null && (bool)Session[ "IsAuthorized" ] == true );
注释去掉。在登录成功加入Session[“IsAuthorized”] = true;就可以了。
(非必要)五.修改上传文件名
修改ckfinder的源代码，找到Connector\CommandHandlers\FileUploadCommandHandler.cs这个文件，定位到:csharp 代码
string sExtension = System.IO.Path.GetExtension( oFile.FileName );
sExtension = sExtension.TrimStart( '.' );
在下面加一行代码:
sFileName = DateTime.Now.ToString("yyyyMMddHHmmssfff") + "." + sExtension;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- （转）asp.net mvc中ckeditor+ckfinder的配置方法
- asp.net mvc中ckeditor+ckfinder的配置方法
- asp.net mvc中ckeditor+ckfinder的配置方法
- asp.net mvc中ckeditor+ckfinder的配置方法 (1)
- asp.net mvc中ckeditor+ckfinder的配置方法
- asp.net mvc中ckeditor+ckfinder的配置方法
- 【转】asp.net mvc中ckeditor+ckfinder的配置方法
- asp.net mvc中ckeditor+ckfinder的配置方法
- asp.net下ckeditor3.0.1和ckfinder_aspnet_1.4.1.1的配置方法
- ASP.NET中CKEditor+CKFinder的配置方法
- 11月17日 阴 星期二 心情一般 asp.net下ckeditor3.0.1和ckfinder_aspnet_1.4.1.1的配置方法
- ASP.NET MVC中 CKeditor 通过两种方法向后台传值以及编码、乱码问题
- CKEDITOR+CKFINDER的图片上传配置(C#/asp.net/php)
- ckeditor+ckfinder配置及使用（asp,asp.net环境）
- CKEditor3.0在asp.net环境下上传文件的配置，集成CKFinder
- ASP.NET MVC 环境下CKeditor 的配置以及用jQuery进行数据存取操作
- Asp.net 中配置 CKEditor和CKFinder
- ckeditor和ckfinder在asp.net中的配置（分页，自定义按钮）
- Asp.net 中配置 CKEditor和CKFinder
- 在 asp.net 下进行 CKEditor 3.2 配置的方法