FCK在MVC和ASP.NET中的配置和使用

FCK在MVC和ASP.NET中的配置和使用

一:FCK配置
 1. 下载
    FCKeditor_2.6.3.zip(核心文件)
    FCKeditor.Net_2.6.3.zip(。Net Control)
    (下载地址:FCKeditor 的压缩包
    http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor_2.4.3.zip
    FCKeditor 的.net 2.0核心库
    http://nchc.dl.sourceforge.net/sourceforge/fckeditor/FCKeditor.Net_2.2.zip

  (或者直接到我的资源http://download.csdn.net/source/1859109中去下载,里面有使用的例子,结合下面内容一看就会)
 2. 部署到.NET网站中
    FCKeditor_2.6.3.zip解压后将fck根目录改名为fckeditor,放到网站根目录下。
    网站根目录下创建一个文件夹uploadfiles,用于存放上传的文件
    在网站中引用FCKeditor.Net_2.6.3.zip中的“FredCK.FCKeditorV2.dll”

    (注意:在IIS6.0下,上传图片的时候,会出现JS没有权限的错误,解决方法是,更改FredCK.FCKeditorV2.dll的源码,找到 FileBrowser/FileWorkerBase.cs 文件
      代码 124 行

Response.Write( @"(function(){var d=document.domain;while (true){try{var A=window.top.opener.document.domain;break;}catch(e) {};d=d.replace(/.*?(?:/.|$)/,'');if (d.length==0) break;try{document.domain=d;}catch (e){break;}}})();" );

把 try 中的 document.domain=d; 删除即可.
 
     然后重新生成 FredCK.FCKeditorV2.dll即可)
 
3. 简化fck配置
    删除所有以_开始的文件和文件夹,在filemanager中的connector中除aspx以外的文件夹

4. 修改fck的语言
    fckeditor中的fckconfig.js
    61~63行
FCKConfig.AutoDetectLanguage    = false ;
FCKConfig.DefaultLanguage        = 'zh-cn' ;
FCKConfig.ContentLangDirection    = 'ltr' ;

5. 修改上传和浏览文件的程序语言类型
    fckeditor中的fckconfig.js
    276~277行
var _FileBrowserLanguage    = 'aspx' ;    // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage    = 'aspx' ;    // asp | aspx | cfm | lasso | perl | php | py

6. 上传权限设置
    fckeditor2.6.3默认已经在fckconfig.js中允许被授权的连接上传和浏览文件了,但是默认情况下有将所有的连接都设为了未授权状态。修改方法为修改editor/filemanager/connector/aspx/config.ascx

private 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 );
        //
        //  where Session[ "IsAuthorized" ] is set to "true" as soon as the
        // user logs in your system.

        return true;
    }
    找到CheckAuthentication方法,默认情况返回false,这里要改为true。也可以根据登录情况来选择权限检测的返回值。

 

至此,上传设置已经完成!

下面讲一下上传设置的优化(初学者可以不用理会):

1. fckeditor的上传有两种方式:quick方式和非quick方式。
    非quick方式是通过单击“浏览服务器”,在“浏览服务器”窗口中上传。这种上传根据上传文件的类型,自动上传到相应的目录,例如图片自动上传到uploadfiles/image下(uploadfiles为用户自己指定);
    quick方式则通过在“上传”选项卡中上传。这种上传直接将文件上传到上传根目录uploadfiles。(uploadfiles为用户自己指定)。
    但是个人认为quick上传不好的地方在于所有上传的文件不分类型都放在根目录,很凌乱。所以考虑将这两种上传方式都按照类型存放到相应的文件夹中。

   修改方法:

方法1:修改filemanager/connectors/aspx/config.ascx

 

        TypeConfig["File"].AllowedExtensions = new string[] { "7z", "aiff", "asf", "avi", "bmp", "csv", "doc", "fla", "flv", "gif", "gz", "gzip", "jpeg", "jpg", "mid", "mov", "mp3", "mp4", "mpc", "mpeg", "mpg", "ods", "odt", "pdf", "png", "ppt", "pxd", "qt", "ram", "rar", "rm", "rmi", "rmvb", "rtf", "sdc", "sitd", "swf", "sxc", "sxw", "tar", "tgz", "tif", "tiff", "txt", "vsd", "wav", "wma", "wmv", "xls", "xml", "zip" };
        TypeConfig["File"].DeniedExtensions = new string[] { };
        TypeConfig["File"].FilesPath = "%UserFilesPath%file/";
        TypeConfig["File"].FilesAbsolutePath = (UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%file/");
        TypeConfig["File"].QuickUploadPath = "%UserFilesPath%file/";
        TypeConfig["File"].QuickUploadAbsolutePath = (UserFilesAbsolutePath == "" ? "" : "%UserFilesAbsolutePath%");
    将TypeConfig["File"].QuickUploadPath 的值改为与 TypeConfig["File"].FilesPath相同 = "%UserFilesPath%file/";

方法2:修改FCKeditor.Net_2.6.3源代码(较麻烦)

   (1). 将FCKeditor.Net_2.6.3.zip解压缩,打开解压后的工程,修改FileBrowser/FileWorkerBase.cs

        protected string ServerMapFolder( string resourceType, string folderPath, bool isQuickUpload )
        {
            TypeConfig typeConfig = this.Config.TypeConfig[ resourceType ];

            // Get the resource type directory.
            /*-----------修改前-------------------*/
            //string sResourceTypePath = isQuickUpload ? typeConfig.GetQuickUploadDirectory() : typeConfig.GetFilesDirectory();
            /*------------------------------------*/
            /*-----------修改后-------------------*/
            string sResourceTypePath = typeConfig.GetFilesDirectory();
            /*------------------------------------*/
           
            // Ensure that the directory exists.
            Util.CreateDirectory( sResourceTypePath );

            // Return the resource type directory combined with the required path.
            return System.IO.Path.Combine( sResourceTypePath, folderPath.TrimStart( '/' ) );
        }
    如上面代码,无论isQuickUpload为true或false,都按照非Quick上传方式,取得上传路径(即typeConfig.GetFilesDirectory())。
    (2). 修改fckconfig.js


FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.LinkBrowserWindowWidth    = FCKConfig.ScreenWidth * 0.7 ;        // 70%
FCKConfig.LinkBrowserWindowHeight    = FCKConfig.ScreenHeight * 0.7 ;    // 70%

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Image&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ;    // 70% ;
FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;    // 70% ;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;
FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ;    //70% ;
FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;    //70% ;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=File';
//FCKConfig.LinkUploadAllowedExtensions    = "" ;            // empty for all
FCKConfig.LinkUploadAllowedExtensions    = ".(7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip)$" ;            // empty for all
FCKConfig.LinkUploadDeniedExtensions    = "" ;    // empty for no one

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Image' ;
FCKConfig.ImageUploadAllowedExtensions    = ".(jpg|gif|jpeg|png|bmp)$" ;        // empty for all
FCKConfig.ImageUploadDeniedExtensions    = "" ;                            // empty for no one

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=Flash' ;
FCKConfig.FlashUploadAllowedExtensions    = ".(swf|flv)$" ;        // empty for all
FCKConfig.FlashUploadDeniedExtensions    = "" ;                    // empty for no one

      可以看到包括两部分设置:浏览(LinkBrowser、ImageBrowser和FlashBrowser)和上传(LinkUpload、ImageUpload和FlashUpload)。主要是做了如下修改 
Code
/*-------修改前------------*/
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;
/*-------修改后-----------*/
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=File';

     在最后加上了Type=File,这样通过添加链接上传的文件就上传到了file目录下。
    也可以对FCKConfig.LinkBrowserURL进行修改加上Type=File,这样在点击添加链接里的“浏览服务器”时就只能浏览File目录下的文件和文件夹。可以看到Image和Flash默认时都只能浏览Image和Flash目录,如果去掉Type=Image和Type=Flash就可以浏览上传根目录下的所有目录了。

至此,上传设置就基本完成了。当然还可以对上传做进一步的设置,例如:随机生成文件名;上传目录以year/month/;上传图片加水印等会在以后来贴出来。


以上是配置 下面是  使用
http://zsl79812sun.blog.163.com/blog/static/1234112752009631103449853/

二:FCK的使用
大家找到之前弄好的2个文件
FCKEditor:操作環境的相關程式檔案
FCKEditor.NET:ASP.NET需要的dll,有了這個才能在.NET環境中應用

步驟一:掛上dll
1:把FredCK.FCKeditorV2.dll放到bin目录下
2:点击VS左上角的视图(V),在点工具箱
3:在工具箱中找到常规(一般在最后一个)
4:在常规中点右键,在弹出的选项框中选择 “选择项(I)”
5: 耐心等待....直到弹出“选择工具箱项”
6: 在“选择工具箱项”中找到“.NET Framework组建”
7:点击浏览,选择刚才的bin目录,找到FredCK.FCKeditorV2.dll,选中,并选择打开,然后点确定
8:確認後就會多出一個項目了第一次使用:
拖拉控制項到頁面中,切換到原始檔中
您會發現在上方自動會幫您加入以下的程式碼

 
1 <%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %> 
 view plain | print | copy to clipboard | ?

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
並且會加入以下的FCKeditor控制項
1 <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">  
2 </FCKeditorV2:FCKeditor> 
 view plain | print | copy to clipboard | ?

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"> </FCKeditorV2:FCKeditor>
此時如果去執行,就會出現以下的錯誤
1 HTTP 錯誤 404 - Not Found 
 view plain | print | copy to clipboard | ?

HTTP 錯誤 404 - Not Found
這是由於程式還不知道要到哪裡找相關的工具檔案
設定工具檔案目錄(BasePath="~/FCKeditor/")

1 <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/FCKeditor/">  
2 </FCKeditorV2:FCKeditor> 
 view plain | print | copy to clipboard | ?

<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/FCKeditor/"></FCKeditorV2:FCKeditor>
此時再試一次,就會出現感動的畫面啦

設定圖片上傳的功能
不過再仔細的是用一下,卻會發現圖片上傳的功能無法使用

 
這是因為FCKeditor不知道應該把檔案上傳到哪裡去存放,所以要把這個設定加在Web.config中
首先在您的Web專案中增加一個目錄來存放使用者上傳的資料,假設是【UserFiles】
修改Web.config增加設定,把原本的<appSettings/>改為

 
1 <appSettings> 
2     <add key="FCKeditor:UserFilesPath" value="/tt/UserFiles/"/>  
3     <!--tt代表您的Web專案名稱--> 
4 </appSettings> 
 view plain | print | copy to clipboard | ?

<appSettings> <add key="FCKeditor:UserFilesPath" value="/tt/UserFiles/"/> <!--tt代表您的Web專案名稱--></appSettings>
除此之外,由於FCKEditor預設是給asp使用,所以還需要在設定改為使用aspx
設定改為aspx:
在剛剛複製進來的FCKeditor目錄中找到一個檔案【fckconfig.js】
搜尋字串asp,可以找到以下兩個設定

 
1 var _FileBrowserLanguage    = 'asp' ;  
2 var _QuickUploadLanguage    = 'asp' ;  
 view plain | print | copy to clipboard | ?

var _FileBrowserLanguage = 'asp' ;var _QuickUploadLanguage = 'asp' ;
改為

 
1 var _FileBrowserLanguage    = 'aspx' ;  
2 var _QuickUploadLanguage    = 'aspx' ;  
 view plain | print | copy to clipboard | ?

var _FileBrowserLanguage = 'aspx' ;var _QuickUploadLanguage = 'aspx' ;

這個部分小喵曾多方測試,發現開啟站台時使用File的方式無法測試出來,不過如果是使用http透過IIS的方式建立站台就正常。
程式上的使用:

我們先測試一下如何應用FCKeditor,先再畫面上安排一個FCKeditor與2個Div並且給予id,並指定runat="server",並且安排一個按鈕,希望按下按鈕後,編排的結果畫面呈現在div1,而原始檔則顯示在div2中

 
1 <div> 
2     <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/FCKeditor/">  
3     </FCKeditorV2:FCKeditor> 
4 </div> 
5     <asp:Button ID="Button1" runat="server" Text="Button" /> 
6     <br /> 
7 顯示結果:  
8 <div id="div1" runat="server" style="border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;">Div1</div> 
9 <hr /> 
10 原始碼:  
11 <div id="div2" runat="server" style="border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;">Div1</div> 
 view plain | print | copy to clipboard | ?

<div> <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" BasePath="~/FCKeditor/"> </FCKeditorV2:FCKeditor> </div> <asp:Button ID="Button1" runat="server" Text="Button" /> <br /> 顯示結果: <div id="div1" runat="server" style="border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;">Div1</div> <hr /> 原始碼: <div id="div2" runat="server" style="border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;">Div1</div>
接著安排一下程式控制如下

 
1 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click  
2     Me.div1.InnerHtml = Me.FCKeditor1.Value  
3     Me.div2.InnerText = Me.FCKeditor1.Value  
4 End Sub 
 view plain | print | copy to clipboard | ?

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Me.div1.InnerHtml = Me.FCKeditor1.Value Me.div2.InnerText = Me.FCKeditor1.Value End Sub
接著執行看看,在編輯器中隨便輸入些字,改變一下字的大小、樣式接著按下按鈕
此時又有錯誤出現了

 
1 具有潛在危險 Request.Form 的值已從用戶端 (FCKeditor1="<strong><em><font st...") 偵測到。 
 view plain | print | copy to clipboard | ?

具有潛在危險 Request.Form 的值已從用戶端 (FCKeditor1="<strong><em><font st...") 偵測到。
這是因為事實上送出的時候,所送出的內容是HTML的語法,而ASP.NET預設為了安全起見不允許html的語法,所以這時候,還要再修改個東西,把剛剛的aspx最上方加上以下的屬性設定
validateRequest="false"
再重新整理一次結果,就可以看到效果
所以使用上,要存入資料庫只要把Me.FCKeditor1.Value的內容存入資料庫就可以了,要從資料庫中取回,也可以使用Me.FCKeditor1.Value = Dr.Item("FieldsName")就可以了,真是方便啊!!
安全上的注意事項:

FCKeditor雖然設定上還蠻複雜的,不過程式撰寫上真的很方便使用,不過這裡還要特別注意一些事情,由於使用時會將html的語法的Request安全設定打開,因此有可以會讓您的網站,被殖入<iframe>的攻擊,所以建議承接Me.FCKeditor1.value後,最好先處理一下是否有<iframe>的資料,如果有,最好替換掉、或者發出警告讓使用者不允許填入<iframe>

 

备注:

在ASP.net中获取值的方法为: Server.HtmlDecode(Request.Form["FCKeditor1"])

在MVC中则稍微麻烦一点点:

 

 

另外下面介绍一些附加功能,装了FCK以后,你会发现使用的字体不够多,那么怎么设置呢?请看下面;

打开 fckconfig.js 文件
找到第154行(应该是),会发现:
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
将其修改为:
FCKConfig.FontNames = '宋体;黑体;幼圆;楷体_GB2312;仿宋_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

当当这样还是不行,虽然发现编辑器的字体选项多了已添加的中文字体,但应用到文本上却发现没有任何作用!
接着下一步 :)

 


打开editor/css/fck_editorarea.css 文件

将:
font-family: Arial, Verdana, sans-serif;
修改为:
font-family: 宋体, 黑体, 幼圆, 楷体, 仿宋, Arial, Verdana, sans-serif;

 

 

 

 

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值