asp.net mvc fckeditor全攻略

时间:2021-04-24 19:00:35

环境说明:

软件环境:asp.net mvc3   +   vs2010

系统环境:windows xp sp3

浏览器: ie6(不要鄙视我)

首先:最近因为要使用fckeditor,我们在网络上可以找到很多asp.net mvc fckeditor使用的教程,结果发现不全面。才有了本文。我就直接进入正题了

第一步我们需要下载2个包:

第一个包:FCKeditor_2.6.6第二包:FCKeditor.Net_2.6.4。我们可以在这里下载http://ckeditor.com/download我下载我是最新版。

解压后我们可以得到如下文件:第一个包:

asp.net mvc fckeditor全攻略

这里我们只需要5个文件+1个文件夹就搞定。然后我们把它复制到我们项目的Content/Fck文件夹中

第二包:我们只需要FCKeditor.Net_2.6.4\bin\Release\2.0\FredCK.FCKeditorV2.dll这个Dll文件。同样我们需要复制到项目的bin文件夹中(这里需要右键单击我们的项目 选择在  windows资源管理器中打开)

如下图

asp.net mvc fckeditor全攻略

这样我们的文件处理就完成了。现在我们需要开始进行对他们的配置。

首先我们右键单击项目用的引用,选择添加引用。然后在选项卡中选择浏览。找到项目\bin\FredCK.FCKeditorV2.dll选中,单击确定。如下

asp.net mvc fckeditor全攻略

现在我们开始配置第一个包(项目\fck\editor):

1.打开fckconfig.js。找到

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

我们需要修改为

var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py

非常不明白为什么默认的是php,难道做php开发的比做.net的要帅?拉回正题。这里我们修改的是上传文件的语言使用aspx

当然我们还需要做一个非常有意义的事情就是将

FCKConfig.DefaultLanguage  = 'en' ;改为FCKConfig.DefaultLanguage  = 'zh-cn' ;

这里我们将前台显示语言更改为中文。当然如果您愿意每次在前台巧一次代码修改也可以。

我们开始配置Web. Config文件找到节点appSettings我们添加如下代码

<add key="FCKeditor:BasePath" value="~/Content/Fck/"/>

<add key="FCKeditor:UserFilesPath" value="/FCKPro/Files" />

这里的修改都是方便我们配置,如果您喜欢每次调用配置一次也可以不添加。

现在我们建立HomeController,然后添加一个名为Index的ActionResult代码如下:

public ActionResult Index()
        {
            return View();
        }

然后我们建立一个Aspx的view。

我们在页头引入<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FckV2"%>

然后使用FckV2这个控件具体代码如下

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FckV2"%>
<!DOCTYPE html>

<html>
<head runat="server">
    <title>Index</title>
</head>
<body>
    <div>
    <%using (Html.BeginForm()) { %>
        <FckV2:FCKeditor runat="server"  ID="content"></FckV2:FCKeditor>
        <input type="submit" value="添加" />
    <%} %>
    </div></body>
</html>

我们现在可以让我们的程序运行起来

asp.net mvc fckeditor全攻略

看来不错。。但是我们的新闻是需要图片的。我们尝试下图片上传。悲剧继续发生。我们看了一个错误

asp.net mvc fckeditor全攻略

我们根据提示路径打开config.ascx文件找到方法private bool CheckAuthentication()修改返回值为true;

OK。可以上传了!

这里我说明下CheckAuthentication。我们最好在里面做一次验证。为什么?

因为当我们方法直接返回为真的时候,服务器不会验证用户是否有权限上传。那么结果会导致所有人可以上传包括hack。

好了。废话了一堆本文到此结束。你可以下载示例项目查看结果。我建议大家按本文做一次。

下载示例