FCKeditor.Net編輯器在.net環境的配置方法

FCKeditor,評價不錯,而且開源,官網下載地址:http://www.fckeditor.net/

   下面講講FCKeditor.Net編輯器在.net環境的配置方法。

   第一步:解壓縮FCKeditor_2.6.3.zip文件,並將解壓縮得到的fckeditor文件夾複製到你想使用這個編輯器的網站的根目錄下面。

   第二步:把下載的FCKeditor.Net.zip隨便解壓縮到你硬盤的一個空目錄,裏面是FCKeditor.Net的源代碼,可以對它進行再度開發,我這裏講直接應用,我們要使用到是其目錄下的/bin/Debug目錄中的FredCK.FCKeditorV2.dll文件。在你的網站裏面把這個FredCK.FCKeditorV2.dll添加到bin目錄下。

   第三步:進入FCKeditor文件夾,編輯 fckconfig.js 文件,如下:

 

1、指定編輯器應用的編程環境,修改
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
改爲
var _FileBrowserLanguage = 'aspx' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php


2、配置語言包。有英文、繁體中文等,這裏我們使用簡體中文。
修改
FCKConfig.DefaultLanguage = 'en' ;

FCKConfig.DefaultLanguage = 'zh-cn' ;


3、配置皮膚。有default、office2003、silver風格等,這裏我們可以使用默認。
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
4、在編輯器域內可以使用Tab鍵。(1爲是,0爲否)
FCKConfig.TabSpaces = 0 ; 改爲FCKConfig.TabSpaces = 1 ;


5、加上幾種我們常用的字體的方法,例如:
修改
FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana'


6、編輯器域內默認的顯示字體爲12px,想要修改可以通過修改樣式表來達到要求,打開/editor/css/fck_editorarea.css,修改font-size屬性即可。如font-size: 14px;


7、關於安全性。
如果你的編輯器用在網站前臺的話,那就不得不考慮安全了,在前臺千萬不要使用Default的toolbar,要麼自定義一下功能,要麼就用系統已經定義好的Basic,也就是基本的toolbar,
修改
FCKConfig.ToolbarSets["Basic"] = [
    ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']

FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
   第四步:在Web.Config文件裏面添加,如下所示

1、配置WebConfig,在<appSettings>節點添加,如下所示:
如果你用的是默認的上傳功能,則
    <add key="FCKeditor:BasePath" value="~/fckeditor/"/>
    <add key="FCKeditor:UserFilesPath" value="/網站名稱/UploadFiles/"/>
第五步:在頁面裏應用FCKeditor編輯器

<%@ Page Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" validateRequest="false" %>

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
// 這裏要主要兩個參數
// 默認爲<%@ Page Language="C#" AutoEventWireup="true"   CodeFile="Default.aspx.cs" Inherits="_Default" %>
// 我們要添加一個參數 validateRequest=false,否則提交帶html代碼的內容會報錯
// 從客戶端(...)中檢測到有潛在危險的 Request.Form 值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>無標題頁</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server">
        </FCKeditorV2:FCKeditor>
        &nbsp;</div>
    </form>
</body>
</html>
如何獲取其內容呢?讀取FCKeditor1控件的Value屬性值即可。

到這裏基本OK了,但是我發現在使用圖片上傳功能的時候,會彈出一個阻止框,顯示"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx",解決這個錯誤的方法是打開editor/filemanager/connectors/aspx/config.ascx修改CheckAuthentication()方法,返回true

C# code

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;
}

 


下載地址:http://www.fckeditor.net/download

FCKeditor使用

一、配置
1、在www.fckeditor.net點擊Download,下載FCKEditor_2.5.1.zip和FCKEditor.Net(ASP.NET Control to easily integrate FCKEditor on .Net Web pages.)

2、新建一項目,比如叫FCK。解壓FCKEditor_2.5.1.zip,裏面有個fckeditor目錄。把該目錄整個複製到新建的ASP.NET項目根目錄下。打開fckeditor目錄下的fckconfig.js,修改二項:
FCKConfig.DefaultLanguage = 'en' ;
改爲
FCKConfig.DefaultLanguage = 'zh-cn' ;
-----------------------------------------------------
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

3、在vs05/08的工具箱上新建一個名叫FCKEditor的Tab,然後在裏面點右鍵,選擇Choose Item,定位到解壓FCKEditor.Net後生成的FCKEditor2.51/FCKeditor.Net_2.5/bin/Release/2.0目錄下的FredCK.FCKEditorV2.dll。該Tab下就會生成一個FCKEditor的.net組件。在vs的Design模式下把該組件拖放到界面上。點擊該組件,在屬性面板上設置BashPath爲/FCK/fckeditor/,注意這裏的FCK就是你建的ASP.NET的項目名稱,fckeditor爲項目根目錄下的目錄名稱。(注意:/FCK/fckeditor/前後的斜槓,少了一個都不會顯示編輯器的)。Ctrl+F5!

其它次要配置(不影響使用):
* 可以把fckeditor目錄及其子目錄下所有下劃下開頭的範例、源文件刪掉。
* 可以在fckeditor目錄下只保留fckconfig.js、fckeditor.js和幾個xml文件,其餘全部刪掉。
* fckeditor目錄下的editor目錄下有個filemanager目錄,把該目錄下的borswer/default/connectors目錄中除aspx目錄以外的全部目錄刪掉。
* 可以把editor/lang目錄下除zh-cn.js、en.js、zh.js之外的全部刪掉。

二、圖片上傳
FCKEditor支持圖片上傳。可以在ASP.NET項目根目錄下添加一目錄,起名爲UploadFiles.
在web.config裏的appSettings段裏
<appSettings>
    <add key="FCKEditor:BasePath" value="/FCK/fckeditor"/>
    <add key="FCKeditor:UserFilesPath" value="/FCK/UploadFiles/" />
</appSettings>

注意UserFielsPath,這裏設置的/FCK/UploadFiles/指定了要上傳的目錄。個人認爲這裏的FCK可以認爲是服務器上的虛擬目錄名。(另外發現如設爲時不起作用)。

當上傳圖片時有可能遇到"this connector is disabled Please check the"editor/filemanager/connectors/aspx/config.aspx"的錯誤,這時可以更改fckeditor/editor/filemanager/connectors/aspx/config.ascx的CheckAuthentication()方法,返回true.

三、簡單的FCKEditor存取數據庫及顯示
1、在項目裏添加新項Sql Server Database, 文件名保留爲Database.mdf。在裏面新建一表MyTable,只有兩個字段,一個int型自動增加的primary key, 另一個是text類型的MyContent. 我們要把FCKEditor1.Value值存到這個字段裏。

2、先做個顯示的頁面。項目增加一個Show.aspx,拖一個SqlDataSource,設置一下返回MyTable的內容。再用Repeater顯示。

//代碼

<asp:Repeater ID="myRepeater" runat="server" DataSourceID="SqlDataSource1">
            <HeaderTemplate>
                <table>
            </HeaderTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                       <%# Eval("MyContent") %>
                    </td>
                </tr>
            </ItemTemplate>
            <FooterTemplate>
                </table>
            </FooterTemplate>
        </asp:Repeater>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%nbsp;ConnectionStrings:ConnectionString %>"
        SelectCommand="SELECT [OID], [MyContent] FROM [MyTable] ORDER BY [OID] DESC"></asp:SqlDataSource>

3、存入數據庫
項目中引用System.Configuration(爲了使用System.Web.WebConfigurationManager)
在FCKEditor界面上入一個按鈕,然後
protected void Button1_Click(object sender, EventArgs e)
{
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = System.Web.Configuration.WebConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
SqlCommand cmd = new SqlCommand();
cmd.Connection = conn;
cmd.CommandText = "insert into MyTable(MyContent) values(@FCKContent)";
cmd.Parameters.AddWithValue("FCKContent",FCKeditor1.Value);
conn.Open();
cmd.ExecuteNonQuery();
}
}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章