CKEditor 和 CKFinder 在 asp.net 中的配置！

最新推荐文章于 2016-01-22 16:02:00 发布

weixin_30655219

最新推荐文章于 2016-01-22 16:02:00 发布

阅读量150

点赞数 1

文章标签： javascript php ui ViewUI

原文链接：http://www.cnblogs.com/gotostreet/archive/2011/08/01/2123432.html

版权

First参考：

一、官方Download

1、CKEditor ：点击CKEditor.NET标题下的“Download zip”按钮

此处使用当前最新版本“CKEditor.NET 3.5.2, released on 7 March 2011”

2、CKFinder ：点击Asp.net标签下的“Download zip”或者“Download tar.gz”按钮（PS:两个按钮下载的内容一样，说明）

此处使用当前最新版本“version: 2.0.2, updated 03.03.2011”

——CKEditor是新一代的FCKEditor，很明显的不同点是CKEditor中文件上传功能独立出来了，需要配合使用CKFinder才能实现。

二、具体配置顺序

1、在项目中添加对应的文件

右击网站，添加引用。依次添加两个文件夹中“\bin\Debug” 中的dll文件——CKEditor.NET.dll、CKFinder.dll

2、将文件夹“ckeditor”、“ckfinder”添加到网站的根目录下

注意，下载的文件中包括很多用不到的文件，可以稍微清理一下：

此版本对于CKEditor只需要“\_Samples”文件夹下的“ckeditor”文件夹即可，其余都可不要。

_source文件夹（源程序文件，可以删除）
changes.html(更新列表，可以删除)
install.html(安装指向，可以删除)
license.html(使用许可，可以删除)

3、修改配置文件

（1）CKEditor配置：打开“ckeditor\config.js”文件，根据需要添加配置信息

CKEDITOR.editorConfig = function(config) {

config.skin = 'v2'; //选择皮肤，源文件在“ckeditor\skins\”中
config.resize_enabled = false; 

// 基础工具栏
// config.toolbar = "Basic";    
// 全能工具栏
// config.toolbar = "Full";    
// 自定义工具栏
config.toolbar =
[
['Source', '-', 'Preview'], ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'], 
['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'ShowBlocks'], '/',
['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Link', 'Unlink', 'Anchor'], 
['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], '/',
['Styles', 'Format', 'Font', 'FontSize'], ['TextColor', 'BGColor'], ['Maximize', '-', 'About']
];

}

（2）在CKEditor中集成CKFinder，注意对应文件的路径

将下面的内容继续添加到“ckeditor\config.js”文件中

CKEDITOR.editorConfig = function(config) {……config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html'; //不要写成"~/ckfinder/..."或者"/ckfinder/..."
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';

config.filebrowserWindowWidth = '800';  //“浏览服务器”弹出框的size设置
config.filebrowserWindowHeight = '500'; 
}CKFinder.SetupCKEditor(null, '../ckfinder/');//注意ckfinder的路径对应实际放置的位置

（3）CKFinder的配置：

打开“ckfinder\”下的用户控件config.ascx，更改其BaseUrl路径：

BaseUrl = "~/ckfinder/userfiles/";//or BaseUrl = "ckfinder/userfiles/";

并且更改：

public override boolCheckAuthentication() {
//return false;
return true; //此处直接设置为true有一些危险，正式使用时要适当加入自己的判断逻辑

}

至此，配置工作终于完成啦。。

三、在页面应用CKEditor控件【a，b两种方法】

【a: 引用压缩包内的 INSTALL.html 】

If you want to integrate CKEditor with your ASP.NET page, follow the steps outlined below. 

1.  Go to the official CKEditor download site and download the latest versions of both CKEditor 3.x and the CKEditor for ASP.NET Control. 
2.  Unpack both installation packages to a desired location. 
3.  Add a reference to the CKEditor for ASP.NET Control to your website.
     In Visual Studio use the Add Reference command and browse to the bin\Release\CKEditor.NET.dll file from the unpacked CKEditor for ASP.NET     installation package. You can also manually copy the DLL file to the bin folder of your application. 
4.  Copy the unpacked editor files from the CKEditor 3.x installation package and paste them into the application directory of your website. 
5.  Register the CKEditor for ASP.NET Control in your page:
<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>
6.  Insert a CKEditor instance into the page body:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server"></CKEditor:CKEditorControl>

【b】

1、在页面的<head>中添加对应的js引用：

    <script type="text/javascript" language="javascript" src="ckfinder/ckfinder.js"></script>
    <script type="text/javascript" language="javascript" src="ckeditor/ckeditor.js"></script>

2、然后，在<body>中需要放置该控件的位置加入如下代码，分别有以下几种使用方法：

（1）给控件添加指定的class属性

    <textarea id="textarea1" name="editor1" class="ckeditor">hello!</textarea>

服务器控件：

    <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" CssClass="ckeditor"></asp:TextBox>

（2）注入js代码——此处js代码最好写在控件之后，也可以写在<head>中

    <textarea id="textarea1" name="editor1">hello!</textarea>
    <script type="text/javascript">
        CKEDITOR.replace('editor1', { height:400, width:800 }); 
    </script>

服务器控件：

    <asp:TextBox ID="mckeditor" runat="server" TextMode="MultiLine"></asp:TextBox>
    <script type="text/javascript">
        CKEDITOR.replace('<%=mckeditor.ClientID %>');
    </script>
=============================================================================================================
Second参考：
asp.net下ckeditor3.0.1和ckfinder_aspnet_1.4.1.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文件：

至于将编辑器引用到控件上，网上有如下两种方法：

一是使用客户端控件textarea:

var editor = CKEDITOR.replace('txtContent');

CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');

</script>

二是使用服务器端控件textbox:

<asp:TextBox id="txtContent" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox>

var editor = CKEDITOR.replace('txtContent');

CKFinder.SetupCKEditor(editor, 'http://www.cnblogs.com/ckeditor/ckfinder/');

</script>个人觉得，既然是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。

再次测试，图片上传成功！

转载于:https://www.cnblogs.com/gotostreet/archive/2011/08/01/2123432.html

weixin_30655219

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CKEditor 和 CKFinder 在 asp.net 中的配置！

First参考：一、官方Download1、CKEditor ：点击CKEditor.NET标题下的“Download zip”按钮此处使用当前最新版本“CKEditor.NET 3.5.2, released on 7 March 2011”2、CKFinder ：点击Asp.net标签下的“Download zip”或者“Download tar.gz”按钮（PS:两个按钮下载...
复制链接

扫一扫