資源交流 » FCKeditor 2.6 精簡版下載及中文配置手冊詳細說明
DATE: 2008-4-19 17:04:09 LEVEL: 4 WEATHER: sunny VISITED: <script src="FCKeditor 2_6 精簡版下載及中文配置手冊詳細說明 - 翼帆的孤寂.files/shownum.htm" type=text/javascript></script>
Fckeditor.rar 已精簡版本
365KB,已配置ASP上傳,上傳目錄請在fckeditor/editor/filemanager/connectors/asp/config.asp中設置
Dim ConfigUserFilesPath
ConfigUserFilesPath = "/userfiles/"
中文配置說明:
因爲下載下來的壓縮包裏面有包含很多在我們使用時,用不到的,不刪除也行。看個人喜好下面以PHP爲例,進行程序瘦身
刪除所有”_”開頭的文件和文件夾
刪除FCKeditor的目錄下:
fckeditor.afp
fckeditor.asp fckeditor.cfc
fckeditor.cfm
fckeditor.lasso
fckeditor.pl
fckeditor.py
access.txt
license.txt
刪除語言包editor/lang中除中文和英文以外的語言
刪除skin目錄下除默認皮膚以外的文件夾
filemanager/browser/default/connectors/目錄下除php以外的文件
filemanager/upload/目錄下除php以外的文件
如果你不想要表情包 刪除 editor/images/smiley下的msn文件夾及表情按鈕
好了 精簡完畢
我們通常把編輯器用以個文件夾存放、通常情況下 我們可以明白爲fckeditor或editor
找到裏面兩關鍵文件 fckeditor_php4.php fckeditor_php5.php 這兩個文件的代碼相差不了多少,很顯然跟php版本有關
打開這兩個文件
- function FCKeditor( $instanceName )
- {
- $this->InstanceName = $instanceName ;
- $this->BasePath = './editor/' ; 默認編輯器所在的文件位置
- $this->Width = '100%' ; 默認編輯器寬
- $this->Height = '350' ; 默認編輯器高
- $this->ToolbarSet = 'Default' ; 默認編輯器SKIN
- $this->Value = '' ; 初始值
- $this->Config = array() ;
- }
FCKeditor設置文件 "fckconfig.js"
- FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
- FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
- FCKConfig.EditorAreaStyles = '' ; // 編輯區的樣式表風格
- FCKConfig.ToolbarComboPreviewCSS =''; //工具欄預覽CSS
- FCKConfig.DocType = '' ;//文檔類型
- FCKConfig.BaseHref = ''; // 相對鏈接的基地址
- FCKConfig.FullPage = false ; //是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內容
- FCKConfig.StartupShowBlocks = false ;//決定是否啓用"顯示模塊"
- FCKConfig.Debug = false ;//是否開啓調試功能
- FCKConfigFCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ; //皮膚路徑
- FCKConfig.PreloadImages=... //預裝入的圖片
- FCKConfigFCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ; //插件路徑
- FCKConfig.AutoDetectLanguage = true ; //是否自動檢測語言
- FCKConfig.DefaultLanguage = 'zh-cn' ; //默認語言
- FCKConfig.ContentLangDirection = 'ltr' ; //默認的文字方向,可選"ltr/rtl",即從左到右或從右到左
- FCKConfig.ProcessHTMLEntities = true ; //處理HTML實體
- FCKConfig.IncludeLatinEntities = true ; //包括拉丁文
- FCKConfig.IncludeGreekEntities = true ;//包括希臘文
- FCKConfig.ProcessNumericEntities = false ;//處理數字實體
- FCKConfig.AdditionalNumericEntities = '' ; //附加的數字實體
- FCKConfig.FillEmptyBlocks = true ; //是否填充空塊
- FCKConfig.FormatSource = true ; //在切換到代碼視圖時是否自動格式化代碼
- FCKConfig.FormatOutput = true ; //當輸出內容時是否自動格式化代碼
- FCKConfig.FormatIndentator = ' ' ; //當在源碼格式下縮進代碼使用的字符
- FCKConfig.StartupFocus = false ; //開啓時焦點是否到編輯器,即打開頁面時光標是否停留在fckeditor上
- FCKConfig.ForcePasteAsPlainText = false ; //是否強制粘貼爲純文件內容
- FCKConfig.AutoDetectPasteFromWord = true ; //是否自動探測從word粘貼文件,僅支持IE
- FCKConfig.ShowDropDialog = true ;//是否顯示下拉菜單
- FCKConfig.ForceSimpleAmpersand = false ;//是否不把&符號轉換爲XML實體
- FCKConfig.TabSpaces = 0 ;//按下Tab鍵時光標跳格數,默認值爲零爲不跳格
- FCKConfig.ShowBorders = true ;//合併邊框
- FCKConfig.SourcePopup = false ;//彈出
- FCKConfig.ToolbarStartExpanded = true ;//啓動fckeditor工具欄默認是否展開
- FCKConfig.ToolbarCanCollapse = true ;//是否允許摺疊或展開工具欄
- FCKConfig.IgnoreEmptyParagraphValue = true ;//是否忽略空的段落值
- FCKConfig.FloatingPanelsZIndex = 10000 ;//浮動面板索引
- FCKConfig.HtmlEncodeOutput = false ;//是否將HTML編碼輸出
- FCKConfig.TemplateReplaceAll = true ;//是否替換所有模板
- FCKConfig.ToolbarLocation = 'In' ;//工具欄位置,
- FCKConfig.CustomConfigurationsPath = '' ; // 自定義配置文件路徑和名稱
- FCKConfigFCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 編輯區的樣式表文件
- FCKConfig.BaseHref = ''; // 相對鏈接的基地址
- FCKConfig.Debug = true/false; // 是否開啓調試功能,當調用FCKDebug.Output()時,會在調試窗中輸出內容
- FCKConfigFCKConfig.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 = ""; // 下載拼寫檢查器的網址
- FCKConfigFCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路徑
- FCKConfig.SmileyImages = ''; // 表情文件名稱列表,具體參考默認設置
- FCKConfig.SmileyColumns = 8; // 表情窗口顯示錶情列數
- FCKConfig.SmileyWindowWidth = 320; // 表情窗口顯示寬度,此窗口會因爲表情文件的改變而作調整
- FCKConfig.SmileyWindowHeight = 240; // 表情窗口顯示高度,此窗口會因爲表情文件的改變而作調整
- FCKConfig.FullPage = true/false; // 是否允許編輯整個HTML文件,還是僅允許編輯BODY間的內容
- 上傳設置
- var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
- var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php[/code]
- //第一個是文件瀏覽器使用的語言,第二個快速上傳使用的語言,改成你需要的
- FCKConfig.LinkUploadAllowedExtensions = "" ; // empty for all
- FCKConfig.LinkUploadDeniedExtensions =".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$"
- //這是兩個允許和拒絕上傳的文件類型列表
- FCKConfig.ImageBrowser = false ;是否在插入圖片功能裏面啓用服務器文件瀏覽功能
- FCKConfigFCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=ImageConnector=connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ;
- Type=Image 表示文件類型是image這會使文件瀏覽器定位到文件上傳路徑/image/文件夾下面
- FCKConfig.FlashBrowser = false ;是否在插入flash功能中啓用服務器文件瀏覽功能
- FCKConfig.LinkUpload = false ;是否啓用插入鏈接的快速上傳功能
- FCKConfig.ImageUpload = false ;是否啓用圖片快速上傳功能
- FCKConfig.FlashUpload = false ;是否啓用flash上傳功能
- 服務器文件設置
- 文件瀏覽器的設置:
- fckeditor/editor/filemanager/connectors/asp/config.asp
- ConfigIsEnabled = true 決定是否啓用文件瀏覽器。這個是在服務器上執行的
- ConfigUserFilesPath = "/test/upload/" 上傳文件的路徑(相對的)
- ConfigAllowedExtensions.Add "File", ""
- ConfigDeniedExtensions.Add "File", "php|php2|php3|php4|php5|phtml|pwml|inc|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|com|dll|vbs|js|reg|cgi"
- ConfigAllowedExtensions.Add "Image", "jpg|gif|jpeg|png|bmp"
- ConfigDeniedExtensions.Add "Image", ""
- ConfigAllowedExtensions.Add "Flash", "swf|fla"
- ConfigDeniedExtensions.Add "Flash", ""
- ConfigAllowedExtensions.Add "Media", "swf|fla|jpg|gif|jpeg|png|avi|mpg|mpeg|mp(1-4)|wma|wmv|wav|mid|midi|rmi|rm|ram|rmvb|mov|qt"
- ConfigDeniedExtensions.Add "Media", ""
- 這是4個不同的filetype類型 分別對應了 前臺編輯器的 插入鏈接 插入圖片 插入flash 插入媒體 4個功能
這裏的文件類型與上面提到的兩處文件類型是一致的要改必須許全改
快速上傳:
- ConfigIsEnabled = False //是否啓用快速上傳
- ConfigUserFilesPath = "/UserFiles/"
- //如果想上傳到 /test/upload/yyymmdd/的文件夾下面
- 則修改爲 ConfigUserFilesPath = "/test/upload/" & year(now())& right("0"& month(now()),2)&right("0" & day(now()),2)
FCKeditor設置多個工具欄樣式
FCKeditor中自帶了兩種工具欄樣式,Default 和Base。可是我現在想再加一種工具欄樣式。 我試了一下。將Default樣式的設置複製了一下 改爲FCKConfig.ToolbarSets["Blogedit"],裏面個體的工具欄項我就不寫了。可是當我在調用這個工具欄時,卻提示我說工具欄Blogedit設置沒有找到,這是怎麼回事啊?難道FCKeditor只能使用Def ault 和Base這兩種樣式嗎? 找到 fckconfig.js 裏面設置 這裏我添加了 ddd 工具欄樣式 要用的時候只需要 在
引用的時候 $this->ToolbarSet = 'ddd' ; 就OK 了
- FCKConfig.ToolbarSets["Default"] = [
- ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
- ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
- ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
- ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
- '/',
- ['Bold','Italic','Underline','StrikeThrough','-','Subscrīpt','Superscrīpt'],
- ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'],
- ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
- ['Link','Unlink','Anchor'],
- ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
- '/',
- ['Style','FontFormat','FontName','FontSize'],
- ['TextColor','BGColor'],
- ['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
- ] ;
- FCKConfig.ToolbarSets["Basic"] = [
- ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
- ] ;
- FCKConfig.ToolbarSets["ddd"] = [
- ['OrderedList','UnorderedList','-','Link','Unlink','-','About','Bold','Italic','Underline','StrikeThroug
- h','-','Subscrīpt','Superscrīpt']
- ] ;
有時間我在吧! ADODB+SMARTY中應用板塊寫上去
將FCKEDITOR整合進我的頁面
由於目前的版本提供的FCKEDITOR僅提供了JAVAscrīpt式的整合,因此,這裏僅講述如何應用JAVAscrīpt來整合FCKEDITOR到站點中,當然,其他各種語言的整合,你可以
參考_samples文件夾中的例子來完成
1,假如編輯器已經安裝在你的站點的/FCKEDITOR/文件夾下.那麼,第一步我們需要做的就是在頁面的HEAD段中放入scrīpt標記以引入JAVAscrīpt整合模塊.例如:
<scrīpt type="text/javascrīpt" src="/fckeditor/fckeditor.js"></scrīpt>
其中路徑是可更改的
2,現在,FCKEDITOR類已經可以使用了.有兩個方法在頁面中建立一個FCKEDITOR編輯器:
方法1:內聯方式(建議使用):在頁面的FORM標記內需要插入編輯器的地方置入以下代碼:
scrīpt type="text/javascrīpt">
var ōFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</scrīpt>
方法2:TEXTAREA標記替換法(不建議使用):在頁面的ONLOAD事件中,添加以下代碼以替換一個已經存在的TEXTAREA標記
<html>
<head>
<scrīpt type="text/javascrīpt">
window.onload = function()
{
var ōFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</scrīpt>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
現在,編輯器可以使用了
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
你既可以編輯主配置文件,也可以自己定義單獨的配置文件.配置文件使用JAVAscrīpt語法.
修改後,在建立編輯器時,可以使用以下語法:
var ōFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;
提醒:當你修改配置後,請清空瀏覽器緩存以查看效果
自定義樣式列表
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格式