關於fck

FCKeditor的官方網站是:http://www.fckeditor.net/download

1.下載FCKeditor.Net 和FCKeditor的壓縮包,FCKeditor2.4.2.zip是其最新的Javascript文件和圖片什麼的;FCKeditor.NET.zip是ASP.NET調用的DLL在裏面。

2.解壓FCKeditor.NET.zip包後在FCKeditor.Net_2.2\bin\Debug目錄裏找到FredCK.FCKeditorV2.dll。其他文件沒用,把FredCK.FCKeditorV2.dll複製到我們的網站,建立一個Bin目錄。

3.引用FredCK.FCKeditorV2.dll。

4.配置WebConfig。

<?xml version="1.0"?>
<!--
    注意: 除了手動編輯此文件以外,您還可以使用
    Web 管理工具來配置應用程序的設置。可以使用 Visual Studio 中的
     “網站”->“Asp.Net 配置”選項。
    設置和註釋的完整列表在
    machine.config.comments 中,該文件通常位於
    \Windows\Microsoft.Net\Framework\v2.x\Config 中
-->
<configuration>
<appSettings>

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

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

</appSettings>

<connectionStrings/>
<system.web>

說明:BasePath是fckeditor所在路徑,fckeditor由於我們直接放網站目錄下這樣寫就可以,如果您的網站多放幾層適當調整即可。
            UserFilesPath是所有上傳的文件的所在目錄。爲什麼要設置成/Files這樣而不是~/Files因爲FCKeditor使用這個值來返回你上傳後的文件的相對路徑到客戶端。否則的話客戶訪問的時候就會取客戶的機器目錄而不是http形式的目錄。

建議:Files要單獨做wwwroot目錄下的一個站點比較好,和我們的站點FCKEditor平行。不要把它放FCKEditor裏,爲什麼呢?因爲Files是要讓客戶有寫的權限的,如果放FCKEditor下很危險。

Files目錄要有的權限。你根據自己網站需求設置那個帳號,本文爲方便設置User實際中你可能用ASP.NET帳號更合理。

5.修改fckeditor/fckconfig.js文件
在第182行的位置
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

前臺代碼:

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

<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>

<!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>FCKeditor文本編輯器</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fckeditorv2:fckeditor id="FCKeditor1" runat="server" DefaultLanguage="zh-cn" Height="400px" Width="660px"
></fckeditorv2:fckeditor>

   
    </div>
    </form>
</body>
</html>

怎麼樣獲取結果呢?FCKeditor1.Value就是。

關於fck瘦身:

1、臨時文件及文件夾刪除:從根目錄下開始刪除一切以“_”開頭的文件及文件夾,因爲他們爲臨時文件和文件夾。刪除這類臨時文件及文件夾之後,我們還要刪除一些根目錄下的多餘文件,根目錄下我們只保留fckconfig.js(配置文件)、fckeditor.js(js方式調用文件)、 fckeditor.asp、 fckstyles.xml(樣式)、fcktemplates.xml(模板)文件和editor文件夾。

2、editor/lang目錄:存放的是多語言配置文件,因爲我們只可能用到en和zh-cn(簡體中文)所以,根據我的選擇,我刪掉其他的語言配置文件。

3、editor/skins界面目錄:默認帶有三個界面(default:默認界面,加載速度相對較快;office2003:相對pp的界面,不過速度確實要慢些;silver:銀白色界面,加載速度也相對較快),可以自行決定是否刪除其中一兩個。

4、editor/filemanager/connectors目錄:存放編輯器所支持的Web動態語言,我們以 Asp.net爲例所以保留aspx目錄,test.html文件可以幫助你查看某語言下的上傳設置等(具體上傳設置我將在後面的配置作較爲詳細講解),可以自行決定是否刪除。 基本配置: 

下面我開始對編輯器進行簡單配置(並非每步都必須,可根據自己的需要參考修改): 

1、載入fckeditor的.net方法類庫FCKeditor.Net_2.6.3.zip 

解壓FCKeditor.Net_2.6.3.zip,添加到項目中(載入後別忘了把工程名FredCK.FCKeditorV2.vs2005改爲FredCK.FCKeditorV2),在主目錄的bin文件夾中添加改引用! 

2、默認語言 

打開fckconfig.js文件(注意此文件是utf-8編碼哦),找到FCKConfig.AutoDetectLanguage = true ;(第56行)此句作用爲自動檢測語言,默認爲true,即表示編輯器會根據系統語言自動檢測加載相應的語言,我們將其改爲false,不讓其檢測,然後將FCKConfig.DefaultLanguage = 'en';(編輯器默認語言,第57行)改爲簡體中文"zh-cn"。 

3、字體列表 

依然打開fckconfig.js,因爲此編輯器爲外國人編寫,所以默認不提供中文字體,我們爲其加入,找到FCKConfig.FontNames(第142行)加入“宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;”其他字體可根據自己需要自行加入。 

4、文件上傳 

FCKeditor的文件管理程序在editor/filemanager/文件夾下,分爲瀏覽(browser)和上傳(upload)兩種。“瀏覽”是指瀏覽服務器已存在文件並可以選擇,也可以上傳本地文件至服務器;上傳是指快速上傳,在窗口中點“上傳”選項,選擇本地文件後上傳就行,但是不能查看服務器上已有上傳文件,相對而言不太方便,只是操作更爲快捷。也就是說FCKeditor中有一個文件瀏覽,有兩個文件上傳,而這些設置是分散在多個文件中,配置相對複雜,下面我大致講一下: 

在FCKeditor中共有兩個文件跟上傳功能有關,一個是js文件,一個是aspx文件,前者關閉後界面中不出現相關窗口或按鈕,後者關閉後相關功能不可用。 

js文件即是指的fckconfig.js文件,在以前舊版本的fckconfig.js中首先你必需開啓如下幾項: 

瀏覽上傳功能: 
CODE: 

FCKConfig.LinkBrowser = true ; //文件 

FCKConfig.ImageBrowser = true ; //圖片 

FCKConfig.FlashBrowser = true ; //Flash 

快速上傳功能: 
CODE: 

FCKConfig.LinkUpload = true ; //同上 

FCKConfig.ImageUpload = true ; //同上 

FCKConfig.FlashUpload = true ; //同上 

即把這幾項設爲true,而我們今天使用的2.6.3的fckconfig.js中默認已經是開啓上傳開關顯示功能的,所以,如果你要將該編輯器作爲前臺使用(fckeditor上傳漏洞問題一直沒有得到較好的改善),考慮到安全性你可能需要關閉文件上傳功能,那麼你只需要將這幾項設置爲false即可。 

如果你要使用文件上傳功能,那麼我們繼續配置: 
依然在fckconfig.js文件中,fckeditor對語言默認支持的是php,找到以下兩句,進行相應修改: 
CODE: 

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

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

我們將其均改爲'aspx': 
CODE: 

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

var _QuickUploadLanguage = 'aspx' ; // asp | aspx | cfm | lasso | php 
*.AllowedExtensions:(其中*號代表:FCKConfig.LinkUpload、FCKConfig.ImageUpload 等)表示允許上傳的文件後綴名,爲空表示允許所有文件,你可根據自己需要設置上傳文件後綴名,一定程度增加安全性,設置的格式可以參考它已有的後綴名設置。 

*.DeniedExtensions:同上,表示禁止上傳的文件後綴名。 

注:你設置了允許上傳的,當然禁止的也就不必要設置了,本人推薦設置允許的,畢竟禁止的後綴名列表不能羅列完全,可能還有很多我們不曾想到的後綴名。 

對js文件的配置到此已經完成,下面我們進行aspx文件在上傳方面的設置: 

文件瀏覽上傳修改: 

打開editor/filemanager/browser/default/connectors/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 false; 


將return false改爲return true,即允許上傳,最好在前面加上session判斷用戶登陸,以避免所有人都可以上傳。 

UserFilesPath= "/userfiles/" ;爲定義上傳目錄,可根據自己情況進行修改,我將其改爲upload目錄。 

注:注意FCKeditor是不支持虛擬目錄的,你的所有路徑都是針對網站根目錄的絕對路徑。 


到此上傳基本配置已經完成,整個編輯器最基本的配置也已經結束了


可能出現的錯誤:
FCKeditor出現"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;
} 可能出現的錯誤:
FCKeditor出現"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;
} 可能出現的錯誤:
FCKeditor出現"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;
} 可能出現的錯誤:
FCKeditor出現"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;
}

配置文件(fckconfig.js)中主要配置項目如下,根據自己看情況配置:

CODE:

FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱

FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件

FCKConfig.BaseHref = ''; // 相對鏈接的基地址

FCKConfig.Debug = true/false; // 是否開啓調試功能,當調用FCKDebug.Output()時,會在調試窗中輸出內容

FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 設置皮膚

FCKConfig.AutoDetectLanguage = true/false ; // 是否自動檢測語言

FCKConfig.DefaultLanguage = 'zh-cn' ; // 設置默認語言

FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默認文字方向,ltr左,rtr右

FCKConfig.FillEmptyBlocks = true/false ; // 使用這個功能,可以將空的塊級元素用空格來替代

FCKConfig.FormatSource = true/false; // 切換到代碼視圖時,是否自動格式化代碼

FCKConfig.FormatOutput = true/false; // 當輸出內容時是否自動格式化代碼

FCKConfig.FormatIndentator = ""; // 當在“源碼格式”下縮進代碼使用的字符

FCKConfig.GeckoUseSPAN = true/false; // 是否允許SPAN標記代替B,I,U標記

FCKConfig.StartupFocus = true/false; // 開啓時是否FOCUS到編輯器

FCKConfig.ForcePasteAsPlainText = true/false;// 強制粘貼爲純文本

FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符號轉換爲XML實體

FCKConfig.TabSpaces = 0/1; // TAB是否有效

FCKConfig.TabSpaces = 4; // TAB鍵產生的空格字符數

FCKConfig.ShowBorders = true/false; // 是否合併邊框

FCKConfig.ToolbarStartExpanded = true/false; // 頁面載入時,工具欄是否展開,點“展開工具欄”時纔出現

FCKConfig.ToolBarCanCollapse = true/false; // 是否允許展開摺疊工具欄

FCKConfig.ToolbarSets = object ; // 編輯器的工具欄,可以自行定義,刪減,可參考已存在工具欄

FCKConfig.EnterMode = 'p'; // 編輯器中直接回車,在代碼中生成,可選爲p | div | br

FCKConfig.ShiftEnterMode = 'br'; // 編輯器中Shift+回車,在代碼中生成,可選爲p | div | br

FCKConfig.ContextMenu = 字符串數組; // 右鍵菜單的內容

FCKConfig.FontColors = ""; // 文字顏色列表

FCKConfig.FontNames = ""; // 字體列表

FCKConfig.FontSizes = ""; // 字號列表

FCKConfig.FontFormats = ""; // 文字格式列表

FCKConfig.StylesXmlPath = ""; // CSS樣式列表的XML文件的位置

FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置

FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼寫檢查器

FCKConfig.IeSpellDownloadUrl = ""; // 下載拼寫檢查器的網址

FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑

FCKConfig.SmileyImages = ''; // 表情文件名稱列表,具體參考默認設置

FCKConfig.SmileyColumns = 8; // 表情窗口顯示錶情列數

FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度,此窗口會因爲表情文件的改變而作調整

FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度,此窗口會因爲表情文件的改變而作調整

FCKConfig.FullPage = true/false; // 是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內容

 

 關於加上更改行距的選項

方法如下:
這裏我採用的將編輯器中【樣式】換成【行距】。
第一,在fckconfig.js裏面

方法如下:
這裏我採用的將編輯器中【樣式】換成【行距】。
第一,在fckconfig.js裏面

FCKConfig.CustomStyles =
{
'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } }
};
替換成
FCKConfig.CustomStyles =
{
//mark090522
'12px' : { Element : 'span', Styles : {'line-height' : '12px' } },
'14px' : { Element : 'span', Styles : {'line-height' : '14px' } },
'18px' : { Element : 'span', Styles : {'line-height' : '18px' } },
'22px' : { Element : 'span', Styles : {'line-height' : '22px' } },
'26px' : { Element : 'span', Styles : {'line-height' : '26px' } },
'30px' : { Element : 'span', Styles : {'line-height' : '30px' } },
'36px' : { Element : 'span', Styles : {'line-height' : '36px' } },
'42px' : { Element : 'span', Styles : {'line-height' : '42px' } },
'50px' : { Element : 'span', Styles : {'line-height' : '50px' } },
'64px' : { Element : 'span', Styles : {'line-height' : '64px' } },
'80px' : { Element : 'span', Styles : {'line-height' : '80px' } }
//'Red Title' : { Element : 'h3', Styles : { 'color' : 'Red' } }
//markend
};
第二:在fckstyles.xml裏
<Style name="Marker: Yellow" element="span">
   <Style name="background-color" value="Yellow" />
</Style>
<Style name="Marker: Green" element="span">
   <Style name="background-color" value="Lime" />
</Style>

<Style name="Big" element="big" />
<Style name="Small" element="small" />
<Style name="Typewriter" element="tt" />

<Style name="Computer Code" element="code" />
<Style name="Keyboard Phrase" element="kbd" />
<Style name="Sample Text" element="samp" />
<Style name="Variable" element="var" />

<Style name="Deleted Text" element="del" />
<Style name="Inserted Text" element="ins" />

<Style name="Cited Work" element="cite" />
<Style name="Inline Quotation" element="q" />

<Style name="Language: RTL" element="span">
   <Attribute name="dir" value="rtl" />
</Style>
<Style name="Language: LTR" element="span">
   <Attribute name="dir" value="ltr" />
</Style>
<Style name="Language: RTL Strong" element="bdo">
   <Attribute name="dir" value="rtl" />
</Style>
<Style name="Language: LTR Strong" element="bdo">
   <Attribute name="dir" value="ltr" />
</Style>
將上面的代碼註釋掉
第三:在zh-cn.js
將Style     : "樣式",替換成 Style     : "行距",

 

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