配置fckeditor

  FckEditor配置手冊中文教程詳細說明 收藏
性能
首先,FCKEDITOR的性能是很是好的,用戶只需不多的時間就能夠載入FCKEDITOR所需文件.對於其餘在線編輯器來講,這幾乎是個很難解決的難題,由於在開啓編輯器時須要裝載太多的文件.好比CUTEEDITOR,雖然功能比FCKEDITOR還要強大,但是,它自己也夠龐大了,至於FREETEXTBOX等,其易用性與FCKEDITOR相比,尚有差距,能夠說,FCKEDITOR是一個別具匠心的在線編輯器,它裏面融入了做者高深的面向對象的JAVASCRIPT功力,集易用性與強大的功能與一體.
.與編輯器相關的全部圖像,腳本以及調用頁
.語言文件
.編輯器的皮膚文件
.工具樣的貼圖等
這些將致使在服務器和客戶端間產生至關的流量.若是有許多文件被調用,那麼即使每一個文件很小.也會讓用戶等得不耐煩.
裝載順序
從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/_samples/default.html">http://<your-site>/FCKeditor/_samples/default.html
注意:你能夠將FCKEDITOR放置到任何文件夾,默認狀況下,將其放入到FCKEDITOR文件夾是最爲簡單的方法.若是你放入的文件夾使用別的名稱,請修改配置文件夾中編輯器BasePath參數,以下所示:
oFckeditor.BasePath="/Components/fckeditor/";
另外,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根目錄下面的fckconfig.js文件裏
var _FileBrowserLanguage    = 'asp' ;    // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage    = 'asp' ;    // asp | aspx | cfm | lasso | php
這兩行中改爲您所須要調用的編輯器語言,如用asp.net則改成aspx;
2、解決中文的問題:
在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>

--------------------------------------------------------------------------------
多環境下的配置和使用技巧
--------------------------------------------------------------------------------
 在fckeditor中添加右鍵菜單
如今網上介紹FCKEditor如何配置,如何精簡的例子很是之多,若有須要能夠google一下,此處沒必要贅述。如今介紹一下,如何自定義此編輯器,暫包括如何添加工具條上的item,產生響應,添加右鍵菜單。IT SEEMS VERY EASY!
  閒言少敘,書歸正傳。
  1、自定義右鍵菜單:
  一、 首先,在editor/lang/zh-cn.js裏添加你所要添加的工具條item的名字,此文件定義了一個FCKLang變量,仿照裏邊的格式寫哦,如:First: "第一",注意,若是是不在倒數第二行(倒數第一行是「}」),後邊的這個逗號是必定要有的,否則網頁中不會出現編輯器,筆者曾經犯過如此低級的錯誤,待醒悟後,找一僻靜之所大嘴巴子招呼;呵呵,咱們是中國人,天然在冒號後對應漢語,這也是未來在網頁中顯示的內容。
  二、 以後,在editor/_source/internals/fckcommands.js 裏新建一個command:case 'First': oCommand = new FCKFirstCommand ( 'First', FCKLang.First); break注意那個紅色字體的FCKFirstCommand了麼?這個是一個自定義的command,稍候將討論它。
  三、 而後,在editor/_source/internals/fckcontextmenu.js 添加一個context menu 。 在case 'Generic' : 下面添加以下: oGroup.Add( new FCKContextMenuItem( this, 'First', FCKLang.First, true ) ) ; 其中第四個布爾類型的參數,若是指定爲true,說明菜單有圖標,反之則無。在此,我指明瞭我所自定義的菜單是有圖標的,那麼我就應該把圖標放在editor\skins\xxx\toolbar目錄下,其中xxx就是你在你的配置文件裏選擇的編輯器的皮膚,可是咱們的圖標命名但是有學問的,必須是如FCKContextMenuItem構造函數(且這麼叫它)第二個字符串參數的小寫字母形式,如,這裏個人圖標被命名爲first.gif了。 Ok,如此右鍵菜單就被添加上去了,運行你的網頁,看看FCKEditor是否奏效?若是不奏效的話就要從新參考此文嘍^_^。
  四、而後,還有最關鍵的一步:用editor下的fckeditor.original.html網頁的內容代替fckeditor.html的內容,同時不要忘記備份fckeditor.html文件!
  五、如今開始討論步驟2中的FCKFirstCommand。菜單添加上其了,你總得讓丫擁有什麼功能吧?好,在editor/_source/commandclasses/fck_othercommands.js裏新建這個類:
 四大 FCKeditor 實戰應用技巧
通常創建好類後,還要創建兩個靜態函數:xxx .prototype.Execute,xxx .prototype.GetState。前者是事件處理函數,即點擊了該右鍵菜單所要執行的功能所有寫在這個函數,後者返回菜單的狀態(可用?不可用?)。在此爲了演示,咱們實現一個最簡單的功能: FCKPageCommand.prototype.Execute = function(){ window.alert("It works!");}夠簡單吧,只是不疼不癢的彈出一個提示框。 固然,這裏咱們也能夠不用自定義的FCKFirstCommand,而直接用FCKEditor定義好的command,好比FCKDialogCommand,它也定義在fck_othercommands.js裏,固然若是這樣的話,彈出的會是一個dialog。 再次運行網頁,右擊,點擊你的自定義菜單,是否彈出提示框呢?
FCKeditor至今已經到了2.3.1版本了,對於國內的WEB開發者來講,也基本上都已經「聞風知多少」了,不少人將其融放到本身的項目中,更有不少大型的網站從中吃到了甜頭。今天開始,我將一點點的介紹本身在使用FCKeditor過程當中總結的一些技巧,固然這些實際上是FCK原本就有的,只是不少人用FCK的時候沒發現而已 :P
  一、適時打開編輯器
  不少時候,咱們在打開頁面的時候不須要直接打開編輯器,而在用到的時候纔打開,這樣一來有很好的用戶體驗,另外一方面能夠消除FCK在加載時對頁面打開速度的影響,如圖所示
 
  點擊「Open Editor"按鈕後纔打開編輯器界面
 

  實現原理:使用JAVASCRIPT版的FCK,在頁面加載時(未打開FCK),建立一個隱藏的TextArea域,這個TextArea的name和ID要和建立的FCK實例名稱一致,而後點擊"Open Editor"按鈕時,經過調用一段函數,使用FCK的ReplaceTextarea()方法來建立FCKeditor,代碼以下
<script type="text/javascript">
     <!--
     function showFCK(){
      var oFCKeditor = new FCKeditor( 'fbContent' ) ;
      oFCKeditor.BasePath = '/FCKeditor/' ;
      oFCKeditor.ToolbarSet = 'Basic' ;
      oFCKeditor.Width = '100%' ;
      oFCKeditor.Height = '200' ;
      oFCKeditor.ReplaceTextarea() ;
     }
     //-->
     </script>
     <textarea name="fbContent" id="fbContent"><textarea>

 二、使用FCKeditor 的 API
  FCKeditor編輯器,提供了很是豐富的API,用於給End User實現不少想要定製的功能,好比最基本的數據驗證,如何在提交的時候用JS判斷當前編輯器區域內是否有內容,FCK的API提供了GetLength()方法;
  再好比如何經過腳本向FCK裏插入內容,使用InsertHTML()等;
  還有,在用戶定製功能時,中間步驟可能要執行FCK的一些內嵌操做,那就用ExecuteCommand()方法。
  詳細的API列表,請查看FCKeditor的Wiki。而經常使用的API,請查看FCK壓縮包裏的_samples/html/sample08.html。此處就不貼代碼了。
三、外聯編輯條(多個編輯域共用一個編輯條)
  這個功能是2.3版本纔開始提供的,之前版本的FCKeditor要在同一個頁面裏用多個編輯器的話,得一個個建立,如今有了這個外聯功能,就不用那麼麻煩了,只須要把工具條放在一個適當的位置,後面就能夠無限制的建立編輯域了,如圖:
 
  要實現這種功能呢,須要先在頁面中定義一個工具條的容器:<divid="xToolbar"></div>,而後再根據這個容器的id屬性進行設置。
  ASP實現代碼:   <div id="fckToolBar"></div> 
<% 
Dim oFCKeditor 
Set oFCKeditor = New FCKeditor 
with oFCKeditor 
.BasePath = fckPath 
.Config("ToolbarLocation") = "Out:fckToolBar" 
.ToolbarSet = "Basic" 
.Width = "100%" 
.Height = "200" 
.Value = "" 
.Create "jcontent" 
.Height = "150" 
.Value = "" 
.Create "jreach" 
end with 
%>

  JAVASCRIPT實現代碼: <div id="xToolbar"></div> 
FCKeditor 1: 
<script type="text/javascript"> 
<!-- 
// Automatically calculates the editor base path based on the _samples directory. 
// This is usefull only for these samples. A real application should use something like this: 
// oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value. 
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ; 
var oFCKeditor = new FCKeditor( 'FCKeditor_1' ) ; 
oFCKeditor.BasePath = sBasePath ; 
oFCKeditor.Height = 100 ; 
oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)' ; 
oFCKeditor.Value = 'This is some <strong>sample text</strong>. You are using FCKeditor.' ; 
oFCKeditor.Create() ; 
//--> 
</script> 
<br /> 
FCKeditor 2: 
<script type="text/javascript"> 
<!-- 
oFCKeditor = new FCKeditor( 'FCKeditor_2' ) ; 
oFCKeditor.BasePath = sBasePath ; 
oFCKeditor.Height = 100 ; 
oFCKeditor.Config[ 'ToolbarLocation' ] = 'Out:parent(xToolbar)' ; 
oFCKeditor.Value = 'This is some <strong>sample text</strong>. You are using FCKeditor.' ; 
oFCKeditor.Create() ; 
//--> 
</script>

  此部分的詳細DEMO請參照:
_samples/html/sample11.html
_samples/html/sample11_frame.html
四、文件管理功能、文件上傳的權限問題
  一直之後FCKeditor的文件管理部分的安全是個值得注意,但不少人沒注意到的地方,雖然FCKeditor在各個Release版本中一直存在的一個功能就是對上傳文件類型進行過濾,可是她沒考慮過另外一個問題:到底容許誰能上傳?到底誰能瀏覽服務器文件?
  以前剛開始用FCKeditor時,我就出現過這個問題,還好NetRube(FCKeditor中文化以及FCKeditor ASP版上傳程序的做者)及時提醒了我,作法是去修改FCK上傳程序,在裏面進行權限判斷,而且再在fckconfig.js裏把相應的一些功能去掉。但隨之FCK版本的不斷升級,每升一次都要去改一次配置程序fckconfig.js,我發覺厭煩了,就沒什麼辦法能更好的控制這種配置麼?事實上,是有的。
  在fckconfig.js裏面,有關因而否打開上傳和瀏覽服務器的設置,在建立FCKeditor時,經過程序來判斷是否建立有上傳瀏覽功能的編輯器。首先,我先在fckconfig.js裏面把全部的上傳和瀏覽設置全設爲false,接着我使用的代碼以下:
  ASP版本: <% 
Dim oFCKeditor 
Set oFCKeditor = New FCKeditor 
with oFCKeditor 
.BasePath = fckPath 
.Config("ToolbarLocation") = "Out:fckToolBar" 
if request.cookies(site_sn)("issuper")="yes" then 
.Config("LinkBrowser") = "true" 
.Config("ImageBrowser") = "true" 
.Config("FlashBrowser") = "true" 
.Config("LinkUpload") = "true" 
.Config("ImageUpload") = "true" 
.Config("FlashUpload") = "true" 
end if 
.ToolbarSet = "Basic" 
.Width = "100%" 
.Height = "200" 
.Value = "" 
.Create "jcontent" 
%> 

  JAVASCRIPT版本:       var oFCKeditor = new FCKeditor( 'fbContent' ) ;
      <%if power = powercode then%>
      oFCKeditor.Config['LinkBrowser'] = true ;
      oFCKeditor.Config['ImageBrowser'] = true ;
      oFCKeditor.Config['FlashBrowser'] = true ;
      oFCKeditor.Config['LinkUpload'] = true ;
      oFCKeditor.Config['ImageUpload'] = true ;
      oFCKeditor.Config['FlashUpload'] = true ;
      <%end if%>
      oFCKeditor.ToolbarSet = 'Basic' ;
      oFCKeditor.Width = '100%' ;
      oFCKeditor.Height = '200' ;
      oFCKeditor.Value = '' ;
      oFCKeditor.Create() ;

FCKPageCommand.prototype.Execute = function()
{
              window.alert("It works!");
}

FCKeditor在ASP環境中配置使用
先說一下個人測試環境:XPSP2,IIS5.1,FCKeditor2.0
在IIS上創建一個新的站點,我直接取名爲FCKeditor
在DW裏創建一個相對應的站點,測試服務器爲本機,支持VBScript
下載FCKeditor2.0,這個東西是開源的,網上能下到的地方不少,本身找去……
下載下來的應該是壓縮包,解壓到FCKeditor站點根目錄,什麼都不須要更改,直接就能夠開始調用了。等你會了的時候,會發現簡單得要死去!
在站點根目錄下,新建一個index.asp頁面,<body>段內加以下代碼(調用編輯器):
<%
Dim oFCKeditor
 Set oFCKeditor = New FCKeditor
 oFCKeditor.BasePath = "/FCKeditor/"  //設置編輯器的路徑,我站點根目錄下的一個目錄
 oFCKeditor.ToolbarSet = "Default"
 oFCKeditor.Width = "100%"
 oFCKeditor.Height = "600"
 oFCKeditor.Value = "" //這個是給編輯器初始值
 oFCKeditor.Create "logbody" //之後編輯器裏的內容都是由這個logbody取得,命名由你定
 %>
加了這一段別忘了在index.asp前面第二行加上
<!--#include file="FCKeditor/fckeditor.asp" -->
把fckeditor.asp包含進來。切記切記!
就這麼簡單!
如今你只要把這個編輯器當成一個控件來使用,提取它的數據時用:request("logbody")
如今鬆口氣吧。測試成功了。裏面有些設置,去網上找些高級的使用說明來看吧。
FCKeditor使用初步
做者:檸檬園主
  FCKeditor 2.0版終於出來了,之因此用「終於」這個詞,是由於在這一版本上加上了衆望所歸的FLASH插入功能。能夠說在全部的在線編輯器中,FCKeditor是目前互聯網上最好的編輯器,功能強大,支持多種瀏覽器,無平臺限制,能夠和多種WEB語言融合,多語言支持,開源等~~
  對於一個全新的網站,FCKeditor就能夠直接拿過來用了,不須要進行什麼修改。可是對於絕大多數的已有網站而言,FCKeditor的一些設置並不適合本身的使用,這篇文章旨在告訴你簡單的修改FCKeditor以方便您的網站的使用。
  第一項工做就是對這個功能宏大的編輯器進行精簡,固然是文件精簡而非功能精簡化。在這裏我以asp版的FCKeditor爲例進行,進入到FCKeditor 2.0文件夾下,先把以「_」爲開頭的文件夾通通刪除,這些文件夾裏放的是範例或是一些其它工具。其實也就是隻保留editor文件夾、fckconfig.js、fckeditor.asp、fckeditor.js、fckstyles.xml、fcktemplates.xml就能夠了,最外層的精簡化完畢,進入到editor文件夾內,先把「_source」文件夾刪除,這裏是一些源文件,對於使用來講沒什麼用處。
  進入p_w_picpaths文件夾,刪除smiley文件夾,些文件是放表情圖標的,因爲接下來我會用我本身的表情圖標,先把他們的刪除,固然,若是你想用這裏的表情圖標那就不要刪掉了。退出 p_w_picpaths再進入lang文件夾內,這裏的東西能夠來個大清洗了,只保留fcklanguagemanager.js、zh-cn.js、en.js、zh.js這四個文件,第一個文件是語言配置文件,有了它才能和fckconfig.js裏的設置成對對應上相應的語言文件,zh-cn.js是簡體中文語言包,en.js就不用說了吧,zh.js是繁體中文的。怎麼樣?一會兒少了幾百K,爽吧~
  再退出lang文件夾,進入skin文件夾,若是你想使用fckeditor默認的這種奶×××,那就把除了default文件夾外的另兩個文件夾直接刪除,若是想用別的,那就本身考慮了,不過我給你個建議,若是不想用默認的,那就選那個silver,由於銀色也就是灰色和任何顏色配起來都不會難看,而那個office2003的皮膚,反正我是很是不喜歡的,而且圖片相對也比較大,又增長了下載時間,不要!
  精簡的最後一步,退出skin文件夾,再進入filemanager,若是你用的不是最新版的fckeditor的話,那這裏就一個文件夾browser,新版的還有一個upload文件夾。一個個來,先進入到filemanager/browser/default/connectors/下,由於我是用的asp的,因此除asp文件夾外,所有刪除。而後再進入filemanager/upload/下,一樣,只留asp文件夾,至此,編輯器的精簡化已經結束了,接下來,咱們對編輯器進行設置修改。
   第一個修改的文件,也就是fckeditor總配置文件,位於根目錄下的fckconfig.js文件。請根據下面的列表進行(以fckeditor 2.0版的爲準):
找到第20行 FCKConfig.DefaultLanguage  = 'en' ;改成 FCKConfig.DefaultLanguage  = 'zh-cn' ;設置默認語言爲簡體中文
找到第40行 FCKConfig.TabSpaces  = 0 ; 改成FCKConfig.TabSpaces  = 1 ; 即在編輯器域內可使用Tab鍵。
若是你的編輯器還用在網站前臺的話,好比說用於留言本或是日記回覆時,那就不得不考慮安全了,在前臺千萬不要使用Default的toolbar,要麼自定義一下功能,要麼就用系統已經定義好的Basic,也就是基本的toolbar,
找到第64行 FCKConfig.ToolbarSets["Basic"] = [
 ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replace','Preview']
] ;
這是我改過的Basic,把圖像功能去掉,把添加連接功能去掉,由於圖像和連接和flash和圖像按鈕添加功能都能讓前臺頁直接訪問和上傳文件,要是這兒不改直接給你上傳個***還不立刻玩完?可是光這樣還不行,fckeditor還支持編輯域內的鼠標右鍵功能。
找到第73行
FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',/*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;
 
這也是我改過的把鼠標右鍵的「連接、圖像,FLASH,圖像按鈕」功能都去掉。

找到 第77行 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' ;
  接下來就設置上傳功能了,仍是以ASP爲例,其實fck默認的就是asp的,把100行如下的全部被註釋掉的代碼所有刪掉就行,而後再把下面全部有關於browser.html和upload.asp的後面的?Type=XX都改爲Type=YY,其中YY爲你想保存文件的文件夾名稱。
  而若是你還想用本身的表情圖標的話,那跳到131行,改掉那個表情圖標的文件夾地址,以及下面的表情圖標的文件名,再下面那三個數字是每行顯示錶情數及彈出窗口的寬和高了,這個的大小要根據您的表情圖標排列的窗口的大小而定了。OK,總配置文件修改結束。
  接下來是編輯器位置的設置,個人習慣是把editor放在根目錄下,最開始所述的五個文件也放在根目錄下(Tips:建議放在根目錄下,而且建議使用時設置路徑也採用絕對路徑,如"/fckeditor/",而個人習慣的設置是"/"),這樣有利於fckeditor的更新升級,而且網站下全部文件夾均可以任意調用,不存在其它文件夾名變了而其它地方就沒法使用編輯器的問題。
  打開fckeditor.asp文件,找到  sBasePath  = "/fckeditor/"改成  sBasePath  = "/"
  打開fckeditor.js文件,找到  this.BasePath  = '/fckeditor/' ;改成  this.BasePath  = '/' ;
  編輯器域內默認的顯示字體爲12px,而個人主頁默認字體爲14px,因此看着就很不舒服,想要修改能夠經過修改樣式表來達到要求,打開/editor/css/fck_editorarea.css,把第4行改成  font-size: 14px;便可。
  接下來就是上傳文件的設置了,這個比較麻煩,請仔細操做。
  打開\editor\filemanager\browser\default\frmresourcetype.html,找到第15行,插入「 ['uploadfile','uploadfile'],」配合上剛纔在fckconfig.js裏的設置,那麼個人上傳文件路徑就是/uploadfile,固然你也能夠改爲你想要的文件夾,但這裏的名稱必定要和fckconfig.js裏的那個「Type=YY」裏的YY一致才行。
  還沒完,繼續進入到editor\filemanager\browser\default\connectors\asp,打開config.asp,先把ConfigIsEnabled = False改爲爲ConfigIsEnabled = True,要不是無法上傳文件的,再把ConfigUserFilesPath = "/UserFile"改爲我想要的ConfigUserFilesPath = "/"。
  接着在「Set ConfigDeniedExtensions = CreateObject( "Scripting.Dictionary" )」後面加入ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""
同理,這裏的設置也是要和上面以及fckconfig.js裏面對應的。
  還有一個上傳,就是快速上傳,這個功能是在fckeditor 2.0裏纔有的,之前的版本沒這個功能。進入\editor\filemanager\upload\asp,一樣打開config.asp,也一樣的把ConfigIsEnabled = False 設置成 ConfigIsEnabled = True,我這裏把ConfigUserFilesPath = "/UserFiles/"改爲我想要的 ConfigUserFilesPath = "/uploadfile/"& Year(Date()) &"-"& Month(Date()) &"/",由於個人上傳文件是放在uploadfile文件夾下,而且是按月分開放置的。快速上傳,不會讓你選擇文件夾,而是經過這裏的設置直接上傳的,這兒設置若是和前面的設置配合很差的話,你的文件就會被上傳得亂七八糟,很不方便管理。接前重複前一個config.asp裏的操做,在後面加上
ConfigAllowedExtensions.Add "uploadfile", ""
ConfigDeniedExtensions.Add "uploadfile", ""
   接下來呢,就講一下如何建立本身的在線編輯器,這裏以ASP和JS版的爲例,ASP版示例代碼,通常用於後臺操做:
 <%
 Dim oFCKeditor
 Set oFCKeditor = New FCKeditor
 oFCKeditor.BasePath = "/"
 oFCKeditor.ToolbarSet = "Default"
 oFCKeditor.Width = "100%"
 oFCKeditor.Height = "400"
 oFCKeditor.Value = rs("logbody")
 oFCKeditor.Create "logbody"
 %>
  ASP版的,固然只能用在以.asp爲擴展名的頁面中,若是你在前在fckedito.asp裏設置過BasePath爲"/"的話,這裏就能夠省掉第三行,ASP版的只有一個Create函數。建議在修改一篇內容時用ASP版的。
接下來看JS版的:
 <script type="text/javascript">
 var oFCKeditor = new FCKeditor( 'logbody' ) ;
 oFCKeditor.BasePath = '/' ;
 oFCKeditor.ToolbarSet = 'Basic' ;
 oFCKeditor.Width = '100%' ;
 oFCKeditor.Height = '400' ;
 oFCKeditor.Value = '' ;
 oFCKeditor.Create() ;
 </script>
  BasePath的設置同上所述,JS版的可用於任何網頁中,甚至用於html頁面,由於其是客戶端生成的,這樣的好處就是一能夠減少網絡流量,由於編輯器文件只需下載一次,二是能夠由客戶端定義何時顯示,因爲fckeditor初始化須要必定時間,在這一點上JS就頗有做用了。
另外,JS版的還有一個功能函數就是ReplaceTextarea()函數,能夠替換指定的TextArea,拿個人網站的日誌的回覆部分示例:
     <script type="text/javascript">
     <!--
     function showFCK(){
     var oFCKeditor = new FCKeditor( 'fbContent' ) ;
     oFCKeditor.BasePath = '/' ;
     oFCKeditor.ToolbarSet = 'Basic' ;
     oFCKeditor.Width = '100%' ;
     oFCKeditor.Height = '200' ;
     oFCKeditor.Value = '' ;
     //oFCKeditor.Create() ;
     oFCKeditor.ReplaceTextarea() ;
     //document.blog_feedback.blogsubmit.disabled = '';
     document.blog_feedback.blogsubmit.style.display = '';
     document.blog_feedback.openFCK.disabled = 'true';
     document.blog_feedback.openFCK.style.display = 'none';
     }
     //-->
     </script>
把其寫成一個簡單的函數,當用戶顯示打開編輯器時才生成這個fckeditor,不用每次刷新頁面都去初始化一個編輯器,頁面的速度就會快多了。
補遺:前面講到了,說是在編輯已有數據內容時不要用JS版的,那是由於單引號(')的問題形成的,在數據內容裏不免會有單引號存在而用JS版生成編輯器時可能就會由於單引號問題,而使編輯器沒法正常生成,而採用asp則不一樣,用ASP版本的是由於數據被當成是一個變量了,而後直接賦值給編輯器域。還有就是除非你要用ReplaceTextArea()方法來生成編輯器,不然你不需先寫一個<textarea>這樣的標籤,一切都會由fckeditor自動生成的,你所需作的只是給fckeditor指定一個實例名。同時你也不用擔憂如何提交,在表單提交的時候,fckeditor會自動提交,提交的變量名是以你指定的fckeditor實例命名的。

FCKEditor在Asp.net環境下的配置安裝
不知道你們留意到沒有了:
FreeTextbox 不開源了,雖然我還有它之前的開源版本。
CSDN用的這個在線編輯器很優秀。
它的名字叫作FCKEditor
它是開源的
與平臺無關,最起碼能支持 Asp, Asp.net , PHP
  之前我一直用FreeTextBox(主要是從Community Server那裏知道的)。可是發現它並非想象中好用,主要是上傳圖片沒有弄好。好了好了,言歸正傳,說說咱們今天的主角,FCKEditor,怎麼在Asp.net中部署吧。
  首先,他的網站下載吧。這裏要注意,你要下載兩個ZIP文件,一個是Core,即核心文件,裏面是整個FCKEditor的核心。第二個是For .net的組件。爲了描述方便,我將真實文件名附上,之後要本身靈活修改啊。
  下載的核心文件叫FCKeditor_2.3.1.zip
  For .net 的文件叫FCKeditor.Net_2.2.zip
  部署步驟:
  解壓FCKeditor_2.3.1.zip,將裏面的FCKEditor複製到你的IIS主目錄裏面,其實要的效果是可以這樣訪問到就能夠了 http://localhost/Fckeditor/ ,將 http://localhost/Fckeditor/fckconfig.js的變量:
  _FileBrowserLanguage,_QuickUploadLanguage 的值改成 aspx,不難作吧。
  (可選)將複製好的FCKEditor裏的以 '_' 開頭的文件及文件夾刪除,固然若是你是在開發也能夠不刪除,裏面都是示例及調試頁面。
  解壓縮FCKeditor.Net_2.2.zip,而後在VS.net 2003中添加新的控件那樣添加,bin\Release\FredCK.FCKeditorV2.dll 這個文件,呵呵,之後你就能夠隨便拖放這個控件了。
  (重要)將上面的DLL文件複製到 http://localhost/FCKeditor/editor/filemanager/upload/aspx/bin/
  而後在IIS設置中讓 http://localhost/FCKeditor/editor/filemanager/upload/aspx/ 這個目錄能夠運行Aspx。一樣, http://localhost/FCKeditor/editor/filemanager/browser/default/connectors/aspx/ 也要重複上面的過程。
  另一種更加簡單的方法是將FredCK.FCKeditorV2.dll 複製 http://localhost/FCKeditor/bin/ 目錄下,而後在IIS中建立應用程序。
  這一步的目的是讓:
  這兩個文件可以工做。
  好了,到此爲止,你在aspx也裏面拖入FCKEditor,將BasePath 設置爲 /FCKEditor/就能夠用了。
若是:
  你在瀏覽服務器時,就會有XML Request Error:XXXXXXXXXXXXXX(500)錯誤。
  你在上傳圖片時,按鈕怎麼按都沒有反應的。
 在jsp環境中配置使用FCKEditor
FCKeditor是sourceforge.net上面的一個開源項目,主要是實如今線網頁編輯器的功能,可讓web程序擁有如MS Word這樣強大的編輯功能。官方網站爲 http://www.fckeditor.net ,在服務器端支持ASP.Net、ASP、ClodFusion、PHP、Java等語言,而且支持IE 5+、Mozilla 、Netscape等主流瀏覽器。
  首先在官方網站下載fckeditor,注意有兩個包,一個是主文件,一個是jsp整合包的。
  一、解壓FCKeditor_2.2.zip,(FCKeditor主文件),將FCKeditor目錄複製到網站根目錄下,
  二、解壓FCKeditor-2.3.zip,(jsp,FCKeditor整合包),做用:This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.
  三、將FCKeditor-2.3/web/WEB-INF/web.xml中的兩個servlet,servlet-mapping定義複製到自已項目的web.xml文件中
修改
<servlet-mapping> 
        <servlet-name>Connector</servlet-name> 
        <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> 
    </servlet-mapping> 
    <servlet-mapping> 
        <servlet-name>SimpleUploader</servlet-name> 
        <url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern> 
 </servlet-mapping>
  爲
<servlet-mapping> 
        <servlet-name>Connector</servlet-name> 
        <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern> 
    </servlet-mapping> 
    <servlet-mapping> 
        <servlet-name>SimpleUploader</servlet-name> 
        <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern> 
  </servlet-mapping>
  四、將FCKeditor-2.3/web/WEB-INF/lib目錄下文件複製到自已項目的lib文件夾中
  五、在需使用FCKeditor的jsp界面中加入:
// 文件開頭處加入 
<%@ taglib uri=" http://fckeditor.net/tags-fckeditor" prefix="FCK" %> 
//要使用的地方加入 
<FCK:editor id="content" basePath="/FCKeditor/" 
                                p_w_picpathBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" 
                                linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" 
                                flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" 
                                p_w_picpathUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image" 
                                linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File" 
                                flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash"> 
            this is default content :) 
</FCK:editor>

  啓動服務器測試。。。。成功後,來給FCKeditor瘦瘦身.
  一、將FCKeditor目錄下及子目錄下全部以」_」下劃線開頭的文件夾刪除
  2.FCKeditor根目錄下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其他所有刪除
  3.將editor/filemanager/upload目錄下文件及文件夾清空.
  4.還能夠將editor/skins目錄下的皮膚文件刪除,只留下default一套皮膚(若是你不須要換皮膚的話)
  5.還能夠將editor/lang目錄下文件刪除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件(英文,簡體中文,繁體中文通常應該夠用了:) )
  完成,如今看是否是清爽了不少?
  其它問題:
  在struts+spring+hibernate中使用,上傳圖像功能中可能會出現報:
  The output format must have a '{http://xml.apache.org/xalan}content-handler’ property!
  錯的狀況,將WEB-INF/lib目錄下xalan*.jar刪除試試
  安全問題:
  假如在前臺讓普通用戶也能使用FCKEditor,要注意相關安全問題,在前臺使用時,不要使用默認的ToolBar,
  要將添加圖像,flash,圖像域按鈕去掉
在fckconfig.js中大約78行配置  那些數組中的值就像當於界面上的一個功能,你能夠強行把每組值試出來表明什麼。:P
  到此安裝FCKeditor就完成了,相關詳細配置你能夠看FCKeditor-2.3.zip,(jsp,FCKeditor整合包)文件夾中web/_samples目錄下的例子。
PHP環境下配置在線編輯器FCKeditor
在線編輯器FCKeditor 2.0PHP環境下試用小記
  1、簡介
  2004年11月30日推出了FCKeditor 2.0 RC1版,據其官方網站稱:這是FCKeditor 2.0版的第一個穩定版本。你們如今能夠考慮正式使用它了。目前支持的後臺語言有ASP、ASP.Net、PHP和ColdFusion。
  筆者在通過簡單的試用發現,在線編輯器2.0版確實比1.6版有了許多的改進。首先是FCKeditor的文件結構更加清晰,能夠更方便地將其部署在本身的系統中。另外2.0版終於支持了Firefox 1.0瀏覽器,這將爲FCKeditor贏得更多的使用者。廢話很少說,讓咱們趕快來學習如何安裝、配置FCKeditor 2.0吧。
  2、安裝與範例
  首先到 http://sourceforge.net/projects/fckeditor/ 下載FCKeditor 2.0 RC1(554K),並將其解壓縮到你的網站目錄裏面,並將文件夾名改成FCKeditor。舉例來講,若是你的網站放在shaof這個目錄下面,則在這個目錄中創建3個子目錄:
n         FCKeditor:存放從網站上下載的FCKeditor在線編輯器
n         upp_w_picpaths:用於存放上傳的圖片
n         admin:裏面存放測試頁面
  網站的結構以下:
      /FCKeditor           //FCKeditor目錄
      /UserFiles            //上傳文件目錄
      /admin
              test.php          //提交數據頁面
              testsubmit.php     //顯示數據頁面

  進入到FCKeditor目錄下,打開_samples目錄,裏面含有各類編程語言調用FCKeditor的範例程序頁面,其中php目錄中包含着一些使用PHP來調用FCKeditor的範例,你們能夠看一下,瞭解FCKeditord的調用方法,下面是我簡寫了一個test.php程序,放在網站根目錄下的admin目錄中:

if($_POST["ADD"]){    
       $Content=$_POST['EditorDefault'];
echo $Content;
//變量$Content就是咱們在FCKeditord裏面編輯的內容,這裏能夠將其保存到數據庫,代碼省略。
}
  
 
 

  3、配置在線編輯器
  FCKeditor 2.0的配置文件爲FCKeditor\fckconfig.js,其中幾個重要的配置項目以下:
  一、工具欄的設置
默認狀況下,FCKeditor會調用以下的工具欄按鈕,你們能夠根據本身的須要進行增減。須要注意的是,2.0版與1.6版的按鈕並不徹底相同,有些按鈕以及刪除或者更名了。
//##
//## Toolbar Buttons Sets
//##
FCKConfig.ToolbarSets["Default"] = [
       ['Source','-','Save','NewPage','Preview'],
       ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
       ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
       ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
       ['OrderedList','UnorderedList','-','Outdent','Indent'],
       ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
       ['Link','Unlink'],
       ['Image','Table','Rule','SpecialChar','Smiley'],
       ['Style','FontFormat','FontName','FontSize'],
       ['TextColor','BGColor'],
       ['About']
] ;

  二、簡體中文設置
  編輯edit/lang/fcklanguagemanager.js
  將下面語句
FCKLanguageManager.AvailableLanguages = 
{
 'ar'  : 'Arabic',
 'bs'  : 'Bosnian',
 'ca'  : 'Catalan',
 'en'  : 'English',
 'es'  : 'Spanish',
 'et'  : 'Estonian',
 'fi'  : 'Finnish',
 'fr'  : 'French',
 'gr'  : 'Greek',
 'he'  : 'Hebrew',
 'hr'  : 'Croatian',
 'it'  : 'Italian',
 'ko'  : 'Korean',
 'lt'  : 'Lithuanian',
 'no'  : 'Norwegian',
 'pl'  : 'Polish',
 'sr'  : 'Serbian (Cyrillic)',
 'sr-latn' : 'Serbian (Latin)',
 'sv'  : 'Swedish'
}
  添加一行 'zh-cn'    : 'Chinese' 從而變成
FCKLanguageManager.AvailableLanguages = 
{
 'ar'  : 'Arabic',
 'bs'  : 'Bosnian',
 'ca'  : 'Catalan',
 'en'  : 'English',
 'es'  : 'Spanish',
 'et'  : 'Estonian',
 'fi'  : 'Finnish',
 'fr'  : 'French',
 'gr'  : 'Greek',
 'he'  : 'Hebrew',
 'hr'  : 'Croatian',
 'it'  : 'Italian',
 'ko'  : 'Korean',
 'lt'  : 'Lithuanian',
 'no'  : 'Norwegian',
 'pl'  : 'Polish',
 'sr'  : 'Serbian (Cyrillic)',
 'sr-latn' : 'Serbian (Latin)',
 'sv'  : 'Swedish',
 'zh-cn'     : 'Chinese'
}
  而後到這裏 http://www.shaof.com/download/zh-cn.js下載漢化好的zh-cn.js保存到editor/lang目錄下便可。
 
  4、設置文件上傳

  FCKeditor 2.0在線編輯器採用了一種名爲「Connector」(鏈接器)的技術來實現對文件的瀏覽以及上傳。下圖顯示了文件瀏覽的工做流程圖。
 
  從圖中能夠看出,當客戶端向服務器發出一個文件操做請求後,Connector就會對此請求進行響應,在服務器的文件系統中進行執行操做,如:文件和文件夾的瀏覽以及建立操做。最後將結果以XML的格式迴應給客戶端。具體的技術細節你們能夠閱讀FCKeditor自帶的說明指南。
  落實到應用,首先咱們要選擇一個後臺語言用來實現這個功能,這裏咱們以PHP爲例進行說明。
  一、  修改配置文件FCKeditor\fckconfig.js中的兩段內容
//Link Browsing
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ;    // 70%
FCKConfig.LinkBrowserWindowHeight       = screen.height * 0.7 ;   // 70%
//Image Browsing
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php" ;
FCKConfig.ImageBrowserWindowWidth  = screen.width * 0.7 ;     // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ;       // 70% ;
 
  二、  修改配置文件
FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php
// Get the "UserFiles" path.
$GLOBALS["UserFilesPath"] = '/UserFiles/' ;

  UserFiles爲文件上傳的路徑,與本文開頭所給的例子相對應,你們能夠自行修改。
 
  好啦,只須要兩步就完成了文件上傳的配置工做,真是簡單呀。之後咱們經過FCKeditor上傳的文件都會保存在網站的UserFiles目錄下。
 
  5、結束

  最後你們能夠把FCKeditor目錄下的_docs和_samples兩個目錄刪除以節省空間。本文是筆者之前寫過的一篇名爲《在線編輯器FCKeditor在PHP中的使用方法》(1.6版)文章的升級版本,文章若有不妥之處,還請你們指正。
  另,遇到的問題
  一、圖片文件上傳路徑問題
  安裝我文章裏面的設置,上傳路徑設置爲UserFiles/,可是上傳圖片文件時,FCKeditor都自動把文件上傳到UserFiles/p_w_picpath目錄下面,自作主張的創建了一個p_w_picpath目錄,非常不爽。緣由不明。
 
配置FCKeditor(FCKeditor for java)
1.下載
FCKeditor.java 2.3 (FCKeditot for java)
FCKeditor 2.2 (FCKeditor基本文件)
  2.創建項目:tomcat/webapps/TestFCKeditor.
  3.將FCKeditor2.2解壓縮,將整個目錄FCKeditor複製到項目的根目錄下,
目錄結構爲:tomcat/webapps/TestFCKeditor/FCKeditor
而後將FCKeditor-2.3.zip(java)壓縮包中\web\WEB-INF\lib\目錄下的兩個jar文件拷到項目的\WEB-INF\lib\目錄下。把其中的src目錄下的FCKeditor.tld文件copy到TestFCKedit/FCKeitor/WEB-INF/下
  4.將FCKeditor-2.3.zip壓縮包中\web\WEB-INF\目錄下的web.xml文件合併到項目的\WEB-INF\目錄下的web.xml文件中。
  5. 修改合併後的web.xml文件,將名爲SimpleUploader的Servlet的enabled參數值改成true,
以容許上傳功能,Connector Servlet的baseDir參數值用於設置上傳文件存放的位置。
添加標籤訂義:
<taglib>
<taglib-uri>/TestFCKeditor</taglib-uri>
<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location>
</taglib>

  6. 上面文件中兩個servlet的映射分別爲:/editor/filemanager/browser/default/connectors/jsp/connector
和/editor/filemanager/upload/simpleuploader,須要在兩個映射前面加上/FCKeditor,
即改成/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
/FCKeditor/editor/filemanager/upload/simpleuploader。
  7.進入skin文件夾,若是你想使用fckeditor默認的這種奶×××,
那就把除了default文件夾外的另兩個文件夾直接刪除.
  8.刪除/FCKeditor/目錄下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四個文件之外的全部文件
刪除目錄/editor/_source,
刪除/editor/filemanager/browser/default/connectors/下的全部文件
刪除/editor/filemanager/upload/下的全部文件
刪除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四個文件的全部文件
  9.打開/FCKeditor/fckconfig.js
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替換成如下內容:
FCKConfig.LinkBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ;
FCKConfig.ImageBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ;
FCKConfig.FlashBrowserURL
= FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ;
FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ;
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

  10.其它
fckconfig.js總配置文件,可用記錄本打開,修改後將文件存爲utf-8 編碼格式。找到:
  FCKConfig.TabSpaces = 0 ; 改成FCKConfig.TabSpaces = 1 ; 即在編輯器域內可使用Tab鍵。
  若是你的編輯器還用在網站前臺的話,好比說用於留言本或是日記回覆時,那就不得不考慮安全了,
      在前臺千萬不要使用Default的toolbar,要麼自定義一下功能,要麼就用系統已經定義好的Basic,
     也就是基本的toolbar,找到:
     FCKConfig.ToolbarSets["Basic"] = [
     ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
     'Smiley','SpecialChar','Replace','Preview'] ] ;
     這是改過的Basic,把圖像功能去掉,把添加連接功能去掉,由於圖像和連接和flash和圖像按鈕添加功能都能讓前臺
     頁直接訪問和上傳文件, fckeditor還支持編輯域內的鼠標右鍵功能。
     FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
     /*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;
     這也是改過的把鼠標右鍵的「連接、圖像,FLASH,圖像按鈕」功能都去掉。
  找到: 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' ;
     七、添加頁面
 
<%@ page language="java" import="com.fredck.FCKeditor.*" %>
<%@ taglib uri="/WEB-INF/tlds/FCKeditor.tld" prefix="FCK" %>
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
<form action="show.jsp" method="post" target="_blank">
<table border="0" width="700"><tr><td>
<textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea>
<script type="text/javascript">
var oFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "FCKeditor/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ; 
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

     編輯web.xml 文集 添加 以下片段
  <servlet>
  <servlet-name>SimpleUploader</servlet-name>
  <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
  <init-param>
   <param-name>baseDir</param-name>
   <param-value>/UserFiles/</param-value>
  </init-param>
  <init-param>
   <param-name>debug</param-name>
   <param-value>true</param-value>
  </init-param>
  <init-param>
   <param-name>enabled</param-name>
   <param-value>false</param-value>
  </init-param>
  <init-param>
   <param-name>AllowedExtensionsFile</param-name>
   <param-value></param-value>
  </init-param>
  <init-param>
   <param-name>DeniedExtensionsFile</param-name>
   <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>
  </init-param>
  <init-param>
   <param-name>AllowedExtensionsImage</param-name>
   <param-value>jpg|gif|jpeg|png|bmp</param-value>
  </init-param>
  <init-param>
   <param-name>DeniedExtensionsImage</param-name>
   <param-value></param-value>
  </init-param>
  <init-param>
   <param-name>AllowedExtensionsFlash</param-name>
   <param-value>swf|fla</param-value>
  </init-param>
  <init-param>
   <param-name>DeniedExtensionsFlash</param-name>
   <param-value></param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
 </servlet>
  <servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
  </servlet-mapping>
  
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
  </servlet-mapping>  
 <taglib>
 <taglib-uri>/WEB-INF/FCKeditor.tld</taglib-uri>
 <taglib-location>/WEB-INF/tlds/FCKeditor.tld</taglib-location>
 </taglib>

  //引入在線編輯器
  include("../FCKeditor/fckeditor.php") ;
  這裏咱們先看一下調用FCKeditor的函數,2.0版的調用方式與1.6版變化不大,若是你之前安裝過FCKeditor 1.6,那麼只須要修改不多的代碼升級到2.0。
  FCKeditor( instanceName[, width, height, toolbarSet, value]
引用值 含義
  InstanceName 實例化編輯器所需的惟一名稱
  Width 編輯器的寬度,單位爲象素或者百分比(可選擇的,默認爲:100%)
  Height 編輯器的高度,單位爲象素或者百分比(可選擇的,默認爲:200)
  ToolbarSet 工具欄的名稱(可選擇的,默認爲:Default)
  Value 編輯器的內容(HTML)初始值(可選擇的)

  好啦,下面就讓咱們利用這個函數來定製FCKeditor吧。
 
$oFCKeditor = new FCKeditor('FCKeditor1')  ;
$oFCKeditor->BasePath = '../FCKeditor/' ;   
$oFCKeditor->ToolbarSet = 'Default' ;
$oFCKeditor->InstanceName = 'EditorDefault' ;
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '400' ;
$oFCKeditor->Create() ;

本文來自CSDN博客,轉載請標明出處: http://blog.csdn.net/wzhibin/archive/2007/12/06/1921563.aspx
相關文章
相關標籤/搜索