另外,FCKEDITOR檔案夾中所有以底線開頭的檔案夾及檔案,都是可選的,可以安全的從你的發布中刪除.它們並不是編輯器運行時必需的
如何將FCKEDITOR整合進我的頁面?
由於目前的版本提供的FCKEDITOR僅提供了JAVASCRIPT式的整合,因此,這裡僅講述如何應用JAVASCRIPT來整合FCKEDITOR到網站中,當然,其他各種語言的整合,你可以參考_samples檔案夾中的例子來完成
1,假如編輯器已經安裝在你的網站的/FCKEDITOR/檔案夾下.那麼,第一步我們需要做的就是在頁面的HEAD段中放入SCRIPT標記以引入JAVASCRIPT整合模組.例如:
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
其中路徑是可更改的
2,現在,FCKEDITOR類已經可以使用了.有兩個方法在頁面中建立一個FCKEDITOR編輯器:
方法1:內聯方式(建議使用):在頁面的FORM標記內需要插入編輯器的地方置入以下代碼:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</script>
方法2:TEXTAREA標記替換法(不建議使用):在頁面的ONLOAD事件中,添加以下代碼以替換一個已經存在的TEXTAREA標記
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
3.現在,編輯器可以使用了
FCKEDITOR類參考:
下面是用來在頁面中建立編輯器的FCKEDITOR類的說明
構造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:編輯器的唯一名稱(相當於ID)
WIDTH:寬度
HEIGHT:高度
toolbarSet:工具條集合的名稱
value:編輯器初始化內容
屬性:
instanceName:編輯器執行個體名
width:寬度,預設值為100%
height:高度,預設值是200
ToolbarSet:工具集名稱,參考FCKCONFIG.JS,預設值是Default
value:初始化編輯器的HTML代碼,預設值為空白
BasePath:編輯器的基路徑,預設為/Fckeditor/檔案夾,注意,盡量不要使用相對路徑.最好能用相對於網站根路徑的表示方法,要以/結尾
CheckBrowser:是否在顯示編輯器前檢查瀏覽器安全色性,預設為true
DisplayErrors:是否顯示提示錯誤,默為true;
集合:
Config[Key]=value;
這個集合用於更改配置中某一項的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";
方法:
Create()
建立並輸出編輯器
RepaceTextArea(TextAreaName)
用編輯器來替換對應的文字框
如何配置FCKEDITOR?
FCKEDITOR提供了一套用於定製其外觀,特性及行為的設定集.主設定檔名為Fckconfig.js
你既可以編輯主設定檔,也可以自己定義單獨的設定檔.設定檔使用JAVASCRIPT文法.
修改後,在建立編輯器時,可以使用以下文法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;
提醒:當你修改配置後,請清空瀏覽器緩衝以查看效果
配置選項:
AutoDetectLanguage=true/false 自動檢測語言
Basehref="" _fcksavedurl="""" 相對連結的基地址
ContentLangDirection="ltr/rtl" 預設文字方向
ContextMenu=字串數組,右鍵菜單的內容
CustomConfigurationsPath="" 自訂設定檔路徑和名稱
Debug=true/false 是否開啟調試功能,這樣,當調用FCKDebug.Output()時,會在調試窗中輸出內容
DefaultLanguage="" 預設語言
EditorAreaCss="" 編輯區的樣式表檔案
EnableSourceXHTML=true/false 為TRUE時,當由可視化介面切換到字碼頁時,把HTML處理成XHTML
EnableXHTML=true/false 是否允許使用XHTML取代HTML
FillEmptyBlocks=true/false 使用這個功能,可以將空的區塊層級元素用空格來替代
FontColors="" 設定顯示顏色拾取器時文字顏色列表
FontFormats="" 設定顯示在文字格式列表中的命名
FontNames="" 字型列表中的字型名
FontSizes="" 字型大小中的字型大小列表
ForcePasteAsPlainText=true/false 強制粘貼為純文字
ForceSimpleAmpersand=true/false 是否不把&符號轉換為XML實體
FormatIndentator="" 當在源碼格式下縮排代碼使用的字元
FormatOutput=true/false 當輸出內容時是否自動格式化代碼
FormatSource=true/false 在切換到程式碼檢視時是否自動格式化代碼
FullPage=true/false 是否允許編輯整個HTML檔案,還是僅允許編輯BODY間的內容
GeckoUseSPAN=true/false 是否允許SPAN標記代替B,I,U標記
IeSpellDownloadUrl=""下載拼字檢查器的網址
ImageBrowser=true/false 是否允許瀏覽伺服器功能
ImageBrowserURL="" 瀏覽伺服器時啟動並執行URL
ImageBrowserWindowHeight="" 映像瀏覽器視窗高度
ImageBrowserWindowWidth="" 映像瀏覽器視窗寬度
LinkBrowser=true/false 是否允許在插入連結時瀏覽伺服器
LinkBrowserURL="" 插入連結時瀏覽伺服器的URL
LinkBrowserWindowHeight=""連結目標瀏覽器視窗高度
LinkBrowserWindowWidth=""連結目標瀏覽器視窗寬度
Plugins=object 註冊外掛程式
PluginsPath="" 外掛程式檔案夾
ShowBorders=true/false 合并邊框
SkinPath="" 皮膚檔案夾位置
SmileyColumns=12 圖符窗列數
SmileyImages=字元數組 圖符窗中圖片檔案名稱數組
SmileyPath="" 圖符檔案夾路徑
SmileyWindowHeight 圖符視窗高度
SmileyWindowWidth 圖符視窗寬度
SpellChecker="ieSpell/Spellerpages" 設定拼字檢查器
StartupFocus=true/false 開啟時FOCUS到編輯器
StylesXmlPath="" 設定定義CSS樣式列表的XML檔案的位置
TabSpaces=4 TAB鍵產生的空白字元數
ToolBarCanCollapse=true/false 是否允許展開/摺疊工具列
ToolbarSets=object 允許使用TOOLBAR集合
ToolbarStartExpanded=true/false 開啟是TOOLBAR是否展開
UseBROnCarriageReturn=true/false 當斷行符號時是產生BR標記還是P或者DIV標記
如何自訂樣式列表呢?
FCKEDITOR的樣式工具列中提供了預定義的樣式,樣式是通過XML檔案定義的,預設的XML樣式檔案存在於FCkEditor根資料夾下的FckStyls.xml檔案中
這個XML檔案的結構分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
每一個STYLE標記定義一種樣式,NAME是顯示在下拉式清單中的樣式名,ELEMENT屬性指定此樣式所適用的對象,因為FCKEDITOR中的樣式是上下文敏感的,也就是說,選擇不同的對象,僅會顯示針對這類對象定義的樣式
拼字檢查
FCKEDITOR 帶了兩種拼字檢查工具,一種是ieSpell,預設情況下使用這種,使用這種方式的拼字檢查,要求客戶下載並安裝iespell這個小軟體,另外,也提供 SpellPager的方式來進行拼字檢查,不過,由於SPELLPAGER是由PHP編寫的伺服器端指令碼,因此,要求你的WEB伺服器必須支援PHP指令碼語言方可
更改拼字檢查器的方式請參見有關設定檔的詳細說明
壓縮指令碼
為了提供指令碼載入的效率,FCKEDITOR採用以下方法對指令碼盡量壓縮以減少指令碼尺寸:
1,移除掉指令碼中的注釋
2.移除掉指令碼中所有無意義的空白
另外,FCKEDITOR還提供了一個專門用於壓縮指令碼的工具以便 你在發布時能減小檔案尺寸,
你可以將_Packager檔案夾中的Fckeditor.Packager.exe複製到FCKEDITOR根資料夾來運行並壓縮指令碼
本地化FCKEDITOR
如果FCKEDITOR沒有提供您所需要的語言(實際上全有了),你也可以自行製作新的語言
,你只需要複製出EN.JS,然後在其基礎上進行翻譯.另外,語言名稱與對應的指令檔名必須遵循RFC 3066標準,但是,需要小寫,例如:Portuguess Language對應的指令檔名必須為pt.js
如果需要針對某個國家的某種語系,則可以在語系縮寫後加上橫線及國家縮寫即可
在使用時,系統會自動偵測用戶端語系及國別而運用適當的介面語言.
當建立一種新的語言後,你必須在"Edit/lang/fcklanguagemanager.js"中為其建立一個條目,如下所示:
FCKLanguageManager.AvailableLanguages =
{
en : 'English',
pt : 'Portuguese'
}
需要提醒的是,檔案必須儲存為UTF-8格式
如何與伺服器端指令碼進行互動?
請查看例子以得到相關內容
另外,在ASP.NET中以以下步驟使用
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控制項到頁面
3.為其指定名稱
4.FCKEDITOR 類的所有屬性不光可以在代碼中使用,而且可以作為FCKEDITOR控制項的屬性直接使用,例如,要改變皮膚,可以在UI頁面中指定 SkinPath="/fckeditor/editor/skins/office2003"即可,其實FCKEDITOR的ASP.NET版本可以做得更好,你可以找到FCKEDITOR ASP.NET 2.1的源檔案,然後修改該控制項的設計,為其暴露更多有用的屬性,重新編譯即可
5,POSTBACK後的資料,使用FCKEDITOR控制項的value屬性獲得
6. 由於預設狀態下,ASP.NET不允許提交含有HTML及JAVASCRIPT的內容,因此,你必須將使用FCKEDITOR的頁面的 ValidateRequest設為false.(<%@page validteRequest="false" %>即可)
1、下載FckEditor 2.4，它主要包括核心檔案。
2、下載FckEditor 2.2 .Net ，包括ASP.NET的DLL檔案，並且解壓到任意目錄。
3、解壓FckEditor 2.4 壓縮包，將檔案夾FCKeditor複製到網站的根目錄，這裡以ASP.NET 2.0的test項目為例，將其複製到test的根目錄，並且在根目錄下建立uploads目錄用來存放編輯器上傳得檔案。
4、修改js配置.開啟FCKeditor目錄下的fckconfig.js檔案，將FCKConfig.DefaultLanguage的值改為zh-cn 使其的介面語言改變為簡體中文，_FileBrowserLanguage和_QuickUploadLanguage的值都改為aspx。可選的修改如下，可以修改編輯器的skin,將FCKConfig.SkinPath = FCKConfig.BasePath +'skins/default/' 的default可以該為office2003或者silver。儲存修改，關閉檔案。
5、配置web.config.
開啟工程的Web. Config檔案，修改appSettings元素，配置如下：
<appSettings>
<add key="FCKeditor:BasePath" value="~/FCKeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/FCKPro/Files" />
</appSettings>
設 置了FCKeditor:BasePath後就不用再每次使用FCKeditor執行個體時指定BasePath屬性了，FCKeditor:UserFilesPath則是制定我們所有上傳的檔案的所在目錄。你也許會問為什麼要設定成/FCKPro/Files這樣而不是~/Files，因為FCKeditor使用這個值來返回你上傳後的檔案的相對路徑到用戶端，~/Files的形式是ASP.NET在服務可以編譯解釋的，但是在用戶端的靜態就不懂這是什麼了。如果使用~/Files後，那麼所有上傳檔案的返迴路徑都是~/Files形式的，你就會得到這樣的連結這樣的連結解果就是路徑為找到。所以才要我們上述那樣設定，這是在開發階段，如果在工程完成後發布時請記住把/FCKPro/Files改成/Files，道理不說大家也明白，開發階段VS2005在運行項目時的URL是http://localhost/項目名稱/的形式，發布後在Server上建立網站，跟路徑就是http://www.abc.com/的形式了，所以發布後一定要改過來。這些地方是在使用FCKeditor2.2+ASP.NET2.0時經常發錯誤而又莫名其所云的地方。
6、在項目中引用剛才解壓的FCKeditor.NET壓縮包裡的FredCK.FCKeditorV2.dll檔案。具體位置是 FCKeditor.Net_2.2/bin/release/FredCK.FCKeditorV2.dll
7、註冊使用者控制項.開啟test項目的default.aspx頁面，在
程式碼
<%@Page Language="C#" MasterPageFile="~/Weblog.master"AutoEventWireup="true" CodeFile="article.aspx.cs" Inherits="article"Title="Test FckEditor" %>
下面加入以下代碼
程式碼
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
然後就可以在default.aspx頁面使用這個控制項了：
程式碼
<fckeditorv2:fckeditorid="FCKeditor" runat="server" Width="580px" EnableXHTML="true"EnableSourceXHTML="true" basepath="~/FCKeditor/"height="500px"></fckeditorv2:fckeditor>
8、如何取得編輯器中的文本。
該控制項有個屬性是value，它就是獲得編輯器中的文本的。
9、FCKeditor控制項的屬性和事件。
具有的屬性列表如下：
AutoDetectLanguage
BaseHref
BasePath
ContentLangDirection
CustomConfigurationsPath
Debug
DefaultLanguage
EditorAreaCSS
EnableSourceXHTML
EnableViewState
EnableXHTML
FillEmptyBlocks
FontColors
FontFormats
FontNames
FontSizes
ForcePasteAsPlainText
ForceSimpleAmpersand
FormatIndentator
FormatOutput
FormatSource
FullPage
GeckoUseSPAN
Height
ID
ImageBrowserURL
LinkBrowserURL
PluginsPath
runat
SkinPath
StartupFocus
StylesXMLPath
TabSpaces
ToolbarCanCollapse
ToolbarSet
ToolbarStartExpanded
UseBROnCarriageReturn
Value
Visible
Width
具體的事件列表如下：
OnDataBinding
OnDisposed
OnInit
OnLoad
OnPreRender
OnUnload
10、其他
官方網站的support上提到，如果使用asp.net2.0和theme，那麼需要開啟\editor\filemanager\upload \aspx\upload.aspx和\editor\filemanager\browser\default\connectors\aspx \connector.aspx檔案，並且在第一行中加入Theme="" 。比如
程式碼
<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>
效能
首先,FCKEDITOR的效能是非常好的,使用者只需很少的時間就可以載入FCKEDITOR所需檔案.對於其他線上編輯器來說,這幾乎是個很難解決的難題,因為在開啟編輯器時需要裝載太多的檔案.比如CUTEEDITOR,雖然功能比FCKEDITOR還要強大,可是,它本身也夠龐大了,至於 FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,可以說,FCKEDITOR是一個別具匠心的線上編輯器,它裡面融入了作者高深的物件導向的JAVASCRIPT功力,集易用性與強大的功能與一體.
.與編輯器相關的所有映像,指令碼以及調用頁
.語言檔案
.編輯器的皮膚檔案
.工具樣的貼圖等
這些將導致在伺服器和用戶端間產生相當的流量.如果有許多檔案被調用,那麼即便每個檔案很小.也會讓使用者等得不耐煩.
在2.0版中,開發人員有兩種方法來解決這個問題.
那就是指定裝載順序和指令碼壓縮
裝載順序
從2.0版開始,編輯器按以下步驟裝載資源:
.基本頁(就是編輯器所在頁)以及裝入編輯器的JS指令碼
.用來建立編輯器的指令碼
.編輯器的語言和皮膚.
.建立編輯器.
.載入預置的編輯文檔內容.
.從現在開始,使用者可以閱讀和編輯文檔了,不過,拖拽支援以及工具列都是停用
.載入編輯器引擎指令碼
.建立工具列,並且可用
.從現在開始,編輯器的所有功能都已經完整
.載入工具列表徵圖
指令碼壓縮
在打包任何新版本時,編輯器的JS指令碼將會進行預先處理.預先處理步驟如下:
.移除所有代碼注釋
.移除所有無用的空白字元.
.將指令碼合并成幾個檔案
使用上面的方法,我們可以將指令檔的大小壓縮到原來的50%.
壓縮後,原始的代碼仍然存在於一個名為_Source的檔案夾中
如何打包?
編輯器已經內建了打包程式,它位於FCKEDITOR的根資料夾中_PACKAGER檔案夾中,名為Fckeditor.Packager.exe,將其複製到FCKEDITOR根資料夾中並運行,即可自動將JS指令碼打包並壓縮
需要注意的是該程式是一個.NET程式,必須安裝.NET FRAMEWORK才能使用
想要擷取支援?
如果你捐贈15000歐元,你就可以獲得1年的免費支援人員(比較貴的說,相當於人民幣15萬,不過西歐的費用相當驚人)
如何安裝?
1.下載最新版的FCKEDITOR
2.解壓縮到你的網站根資料夾中名為FCKEDITOR的檔案夾中(名稱必須為FCKEDITOR,因為設定檔中已經使用此名稱來標示出FCKEDITOR的位置)
3.現在,編輯器就可以使用了,如果想要查看示範,可以按下面方法訪問:
--------------------------------------------------------
附：
一、如何設定上傳檔案語言
把FCKeditor根目錄下面的fckconfig.js檔案裡
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
這兩行中改成您所需要調用的編輯器語言，如用asp.net則改為aspx；
二、解決中文的問題:
在web.config中加入:
<globalization requestEncoding="GB2312" responseEncoding="GB2312"/>
這樣設定後可以顯示中文的檔案，但URL地址也是中文的；
如果伺服器對中文地址的解析不好，可能導致圖片無法瀏覽；
所以修改：editor\filemanager\browser\default\frmresourceslist.html
中的OpenFile函數，把
window.top.opener.SetUrl( fileUrl ) ;
修改為:
window.top.opener.SetUrl( escape(fileUrl) ) ;
三.設定上傳的目錄：
1:在web.config中設定:
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fck/UpLoad/" />
</appSettings>
2:在Session中設定:
在editor\filemanager\browser\default\connectors\aspx\connector.aspx中加入以下代碼:
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
Session["FCKeditor:UserFilesPath"] = "/fck/UpLoad1/";
}
</script>
附：如何在asp.net中動態設定上傳圖片的路徑？
1.在javascript中修改FCKConfig.ImageBrowserURL的值，修改方式如下：
FCKConfig.ImageBrowserURL += "?Path=要上傳的檔案路徑";
如:要把檔案上傳到網站根目錄的UploadFile檔案夾中，則設定為：
FCKConfig.ImageBrowserURL += "?Path=/UploadFile";
2.在"editor\filemanager\browser\default\connectors\aspx\connector.aspx"檔案最後中增加以下程式：
<script runat="server" language="C#">
protected override void OnInit(EventArgs e)
{
if( Request.QueryString["Path"]==null ){
Session["FCKeditor:UserFilesPath"] = "/UpLoadFiles/"; //設定預設值
}else{
Session["FCKeditor:UserFilesPath"] = Request.QueryString["Path"];
}
}
</script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
