2013年9月27日 星期五

FCKeditor_2.6.4文字編輯器

官方網站&API開發文件:http://docs.cksource.com/FCKeditor_2.x/Developers_Guide
FCKeditor是網路上很受廣大開發者引用的文字編輯器，很熱門功能很強
它可以直接在編輯器上上傳檔案，讓USER可以簡單的就編輯一個圖文並茂的內容
套用步驟:
1.請到我BLOG下載檔案並解開至WEB根目錄
http://cid-aebd49eb991ddec8.skydrive.live.com/self.aspx/Develop/FCKeditor%7C_2.6.4%e6%96%87%e5%ad%97%e7%b7%a8%e8%bc%af%e5%99%a8.rar
2.在要編輯的文件最上面貼上下面指令，引用該元件
<!-- #INCLUDE file="fckeditor/fckeditor.asp" -->
3.在要編輯文件中的文字區域欄位改成他專屬的程式碼，如下:
<TEXTAREA name="Book_text"  id="Book_text"></TEXTAREA>
改成
<%
Dim oFCKeditor
Set oFCKeditor = New FCKeditor
oFCKeditor.BasePath = "/fckeditor/"
'oFCKeditor.ToolbarSet = "Basic"  '註解後預設套用fckconfig.js中FCKConfig.ToolbarSets["Default"]
'oFCKeditor.Height = 200 '註解後預設的高度
'oFCKeditor.Width = 300  '註解後預設寬度為100%
oFCKeditor.Value = rs("KItem_Rule")
oFCKeditor.Create "KItem_Rule"   '區塊欄位名稱
%>
即可
4.結合程式
要如何取得該文字區域的內容呢?很簡單只要在接收的頁面用request.form("News_text")就可以接收到內容了，接收到之後搭配SLQ就可以把值寫到DB囉
5.參數設定,其中必改ConfigIsEnabled = true，其餘參考
A.fckconfig.js 中修改
    FCKConfig.DefaultLanguage   = 'zh-tw' ;    //原來是en
    FCKConfig.TabSpaces   = 1 ; //在編輯器中是否可以是否TAB鍵 0 不可用 1 為可用
    var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py需要什麼改成什麼
    var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py需要什麼改成什麼  
   FCKConfig.SmileyWindowWidth  = 320 ;       //寬度
   FCKConfig.SmileyWindowHeight = 210 ;       //高度
B. fckeditor.asp 中修改
     sBasePath   = "/fckeditor/"     '表示 當前這個檔 fckeditor.asp相對於站點根目錄的路徑,看看我的目錄排放

C. FCKeditor\editor\filemanager\connectors\asp\config.asp 中修改
     ConfigIsEnabled = true '啟用上傳功能 把 false 改成 true
     ConfigUserFilesPath = "/userfiles/" '設置你的上傳目錄這裏 "/upFile/" 表示站點根目錄下的 upFile目錄 ，這個目錄是需要自己創建的，大家可以看到上圖目錄結構中我創建了 upFile 目錄，這樣上傳的檔將會存放到這個目錄中。FckEditor會根據您上傳的類別自動在upFIle目錄中創建如 image 、 flash 等目錄。

更多設定資訊可參閱以下網站:
1.http://www.fckeditor.net/demo
2.http://hi.baidu.com/rabeta/blog/item/97cb6089f1cafbb00f2444c1.html/cmtid/5679852f0535bc311f308929.

在安裝好了 FCKeditor 之後，預設的功能列把工具全開，令人感到眼花撩亂，而且會有安全性的問題，所以我們可以照著我們的需求來更改按鈕的設定與配置。


  1. 首先我們必須先開啟 FCKeditor 的配置檔 fckconfig.js，位置在 ./FCKeditor 下面就可以找到。
     
  2. 打開 fckconfig.js 之後，找 FCKConfig.ToolbarSets，底下就會有功能按鍵的設定，依照我們的需求增加或刪除。
     
  3. 各參數的中英對照：
參數 說明 參數 說明
Source 原始碼 DocProps 文件屬性
Save 儲存 NewPage 開新檔案
Preview 預覽 Templates 樣板
Cut 剪下 Copy 拷貝
Paste 貼上 PasteText 貼為純文字
PasteWord 從 Word 貼上 Print 列印
SpellCheck 拼字檢查 Undo 復原
Redo 復原 Find 尋找
Replace 取代 SelectAll 全選
RemoveFormat 清除格式 Form 表單
Checkbox 核取方塊 Radio 選項按鈕
TextField 文字區域 Select 下拉選單
Button 按鈕 ImageButton 影像按鈕
HiddenField 隱藏欄位 Bold 粗體
Italic 斜體 Underline 底線
StrikeThrough 刪除線 Subscript 下標字
Superscript 上標字 OrderedList 數字項目符號
UnorderedList 項目符號 Outdent 減少縮排
Indent 增加縮排 Blockquote 區塊引用
JustifyLeft 靠左 JustifyCenter 置中
JustifyRight 靠右 JustifyFull 左右對齊
Link 建立連結 Unlink 移除連結
Anchor 錨點 Image 插入圖片
Flash 插入Flash Table 插入表格
Rule 插入水平線 Smiley 表情符號
SpecialChar 特殊符號 PageBreak 分頁符號
Style 樣式 FontFormat 字體格式
FontName 字型選擇 FontSize 字型大小
TextColor 文字顏色 BGColor 背景顏色
FitWindow 編輯器最大化 ShowBlocks 顯示HTML標籤區塊
About 關於FCKeditor    
配置選項：

AutoDetectLanguage=true/false 自動檢測語言
BaseHref="" 相對鏈接的基地址
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標
標籤： ,