FCKeditor使用方法詳解_第1頁(yè)
FCKeditor使用方法詳解_第2頁(yè)
FCKeditor使用方法詳解_第3頁(yè)
FCKeditor使用方法詳解_第4頁(yè)
FCKeditor使用方法詳解_第5頁(yè)
已閱讀5頁(yè)，還剩7頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、FCKeditor使用方法技術(shù)詳解作者：深藍(lán)色QQ: 76863715本文PHPChina論壇首發(fā)本文特為PHP5和MySQL5 Web開(kāi)發(fā)技術(shù)詳解一書(shū)編寫(xiě)1、概述FCKeditor是目前最優(yōu)秀的可見(jiàn)即可得網(wǎng)頁(yè)編輯器之一，它采用JavaScript編寫(xiě)。具備功能強(qiáng)大、配置容易、跨瀏覽器、支持多種編程語(yǔ)言、開(kāi)源等特點(diǎn)。它非常流行，互聯(lián)網(wǎng)上 很容易找到相關(guān)技術(shù)文檔，國(guó)內(nèi)許多 WEB項(xiàng)目和大型網(wǎng)站均采用了FCKeditor （如百度，阿里巴巴）。本文將通過(guò)與PHP相結(jié)合，從基本安裝到高級(jí)的配置循序漸進(jìn)介紹給廣大PHPer。FCKeditor 官方網(wǎng)站：FCKeditor Wiki : 2、下載 FC

2、Keditor登錄 FCKeditor 官方站（ ），點(diǎn)擊網(wǎng)站右上角"Download ” 鏈接。 筆者編寫(xiě)本文時(shí)，F(xiàn)CKeditor當(dāng)前最新的穩(wěn)定版本是 2.4.3，因此我們下載此版本的 zip壓縮 格式文檔。如圖1所示：f Ckeditor 2*5 BetiiF( Keditor 氫 3乩科p f C K editor_2.5b.tAr.gzZIP Ale (source cotle mduded)： GZip File (source code induded)：FCKeditor 2-4.3 (Latent Stable)ZIP Ale (source cad? indude

3、d)： 6Zrp File (source code included)；Nightly BuildGenerated every night at 0:30 PST from our “ '、：* pr|jror_.,zip or I '牴尸山廿”_.1 iir.y/aitenticti： The jbowe nighdy i.untJins the ,Lunri&r de .'olLpment'1 version d FCKeditsr. usudllv stabfeJ but net deeply tested. You can also tr h

4、 nnhm1.圖1:下載FCKeditor 2.4.3 （最新穩(wěn)定版）注意：當(dāng)點(diǎn)擊"FCKeditor_243.zip ”鏈接后，將跳轉(zhuǎn)到網(wǎng)站上自動(dòng)下載。如果您當(dāng)前使用 Linux或Unix系統(tǒng)，可以點(diǎn)擊"FCKeditor_243.tar.gz ”鏈接下載.tar.gz格式 的壓縮包。3、安裝 FCKeditor解壓"FCKeditor_243.zip ”文檔到您的網(wǎng)站目錄下， 我們先假定您存放 FCKeditor和調(diào) 用腳本存于同一個(gè)目錄下。目錄結(jié)構(gòu)如下圖所示：o后退* o ”釦戶窗圖2：網(wǎng)站目錄結(jié)構(gòu)圖d因SIWfckeditor 目錄包含 FCKeditor

5、2.4.3 程序文件。check.php 用于處理表單數(shù)據(jù)。add_article.php和 add_article_js.html 分別是 PHP 調(diào)用 FCKeditor 和 JavaScript 調(diào)用 FCKeditor 實(shí)例腳本文件。3.1、用 PHP 調(diào)用 FCKeditor調(diào)用FCKeditor必須先載入 FCKeditor類文件。具體代碼如下。<?phpinclude("fckeditor/fckeditor.php") ; /用于載入 FCKeditor 類文件?>接下來(lái)，我們需要?jiǎng)?chuàng)建FCKeditor實(shí)例、指定FCKeditor存放路徑和創(chuàng)建(

6、顯示)編輯器等。 具體代碼如下所示(代碼一般放在表單內(nèi))。<?php$oFCKeditor = new FCKeditor('FCKeditor1');/創(chuàng)建FCKeditor實(shí)例$oFCKeditor->BasePath = './fckeditor/'/設(shè)置FCKeditor目錄地址$FCKeditor->Width='100%'/設(shè)置顯示寬度$FCKeditor->Height='300px：/設(shè)置顯示高度的高度$oFCKeditor->Create();/創(chuàng)建編輯器?>下面是筆者創(chuàng)建好的實(shí)例代碼

7、，您可將代碼保存為add_article.php。<?phpinclude("fckeditor/fckeditor.php") ; / 用于載入 FCKeditor 類文件?><html><head><meta http-equiv="C onten t-Type" conten t="text/html; charset=gb2312"><title> 用 PHP 調(diào)用 FCKeditor</title></head><body><

8、;form action="check.php" method="post" n ame="exapmle"><?php$oFCKeditor = new FCKeditor('FCKeditorl') ;/ 創(chuàng)建 FCKeditor 實(shí)例，可創(chuàng)建多個(gè)實(shí)例$oFCKeditor->BasePath = './fckeditor/'/ 設(shè)置 FCKeditor 目錄地址$oFCKeditor->Create() ;/ 創(chuàng)建編輯器?><input name="o

9、k" type="submit" value=" 提交"></form></body></html>通過(guò)瀏覽里打開(kāi)http:/you-address/add_article.php查看FCKeditor安裝效果。如圖 3所示。i國(guó)邀代碼（3）1 ih 3tia電矍瞻曬|冒。丨開(kāi)躺| B 1 U訣叫X |：=1I E S |<a n - <4j祥式”格式f字體| Arialt犬小-i 臥 <a初貽內(nèi)密提交圖3: FCKeditor安裝成功注意：如果您想將FCKeditor創(chuàng)建為HTML結(jié)

10、果代碼，以便于在模板引擎里面調(diào)用（如Smarty）可使用如下代碼。$output = $oFCKeditor->CreateHtml（）;現(xiàn)在，您可通過(guò)POST方式獲得編輯器的變量值。本例將表單的action設(shè)置為check.php，您可在check.php里使用代碼$fckeditorV alue = $_POST'FCKeditor1'獲得編輯器的變量值了。FCKeditor安裝成功了。但是，我們還可以通過(guò)更多設(shè)置來(lái)使 FCKeditor更加靈活人性 化。具體方法文本后面介紹。3.2、用 JavaScript 調(diào)用 FCKeditor調(diào)用FCKeditor必須先載入

11、FCKeditor類文件，但與PHP調(diào)用方法不同，應(yīng)用下面的代 碼。vscript type="text/javascript" src="./fckeditor/fckeditor.js">v/script> <!-載入 fckeditor 類->載入FCKeditor類成功后，有三種方法創(chuàng)建(顯示)編輯器。一：內(nèi)嵌方法(推薦)在您想要顯示 FCKeditor的地方創(chuàng)建如下代碼(通常在表單里)：<script type="text/javascript">var oFCKeditor = new

12、FCKeditor('FCKeditor1');oFCKeditor.BasePath = "./fckeditor /"oFCKeditor.Create();</script>下面是筆者創(chuàng)建好的實(shí)例代碼，您可將代碼保存為add_article_js.html。<html><head><script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!- 載入 fckedi

13、tor 類-> <meta http-equiv="C onten t-Type" conten t="text/html; charset=gb2312"><title> 用 JavaScript 調(diào)用 FCKeditor</title></head><body><form action="check.php" method="post" n ame="example"><script type="t

14、ext/javascript">var oFCKeditor = new FCKeditor('FCKeditor1');oFCKeditor.BasePath = "./fckeditor/"oFCKeditor.Create();</script><input name="ok" type="submit" value=" 提交"></form></body></html>通過(guò)瀏覽里打開(kāi) http:/you-addres

15、s/add_article_js.html查看FCKeditor安裝效果。效果和圖 3 完全一樣。同樣，如果您可以使用和前面一樣的方法取得編輯器的POST變量值。$fckeditorV alue = $POST'FCKeditor1'二：文本區(qū)域(TEXTAREA )方法同內(nèi)嵌方法一樣，也必須先載入 fckeditor類。但創(chuàng)建(顯示)編輯器同內(nèi)嵌方法不同，我 們需要為window.onload定義一個(gè)函數(shù)。這樣，函數(shù)便可以在頁(yè)面加載時(shí)執(zhí)行了。函數(shù)的定 義代碼如下所示。<script type="text/javascript">win dow.

16、 onl oad = fun ctio n()var oFCKeditor = new FCKeditor( 'MyTextarea');oFCKeditor.BasePath = "./FCKeditor/"oFCKeditor.ReplaceTextarea();</script>接著，您就可以在頁(yè)面中(通常在表單里) 定義id為MyTextarea的文本區(qū)域(TEXTAREA )。 代碼如下所示：<textarea id ="MyTextarea" n ame="MyTextarea" >

17、</textarea>F面是筆者創(chuàng)建好的實(shí)例代碼，顯示效果當(dāng)然也是一樣的。筆者這里就不哆嗦了。<html><head><script type="text/javascript" src="./fckeditor/fckeditor.js"></script> <!-載入 fckeditor 類-><script type="text/javascript">win dow. onl oad = fun ctio n()var oFCKeditor =

18、 new FCKeditor( 'MyTextarea');oFCKeditor.BasePath = "./fckeditor/" oFCKeditor.ReplaceTextarea();</script><meta http-equiv="C onten t-Type" conten t="text/html; charset=gb2312"><title> 用 JavaScript 調(diào)用 FCKeditor</title></head><body

19、><form action="check.php" method="post" n ame="example"><textarea id ="MyTextarea" n ame="MyTextarea" ></textarea><input name="ok" type="submit" value=" 提交"></form></body></html&

20、gt;三：適合于Ajax的調(diào)用方法同理，您同樣需要加載類文件。然后使用下面的代碼對(duì)div元素創(chuàng)建(顯示)編輯器。var div = document.getElementByld("myFCKeditor");/ 使用 getElementByld 方 法取得myFCKeditor ID 元素var fck = new FCKeditor("myFCKeditor"); / 創(chuàng)建 fckeditor 實(shí)例div.innerHTML = fck.CreateHtml(); 使用 innerHTML 方法，在 myFCKeditor div 元素里創(chuàng)建編 輯

21、器和使用PHP調(diào)用fckeditor 實(shí)例一樣，用javascript 方法調(diào)用fckeditor 實(shí)例也可以設(shè)置編輯器寬度和高度等。cKeditor.Height = 400 ;/ 400像素oFCKeditor.Height ="250" ; / 250像素oFCKeditor.Width ="100%" ; /百分比4、FCKeditor常用設(shè)置FCKeditor已經(jīng)安裝成功了，也可以使用了。但是我們可以通過(guò)一些簡(jiǎn)單的設(shè)置使 FCKeditor更加符合您的項(xiàng)目需求。設(shè)置工具欄很簡(jiǎn)單，只需打開(kāi)fckeditor目錄下面的fckconfig.js文件，

22、按CTRL+F搜索FCKC on fig.ToolbarSets"Default"代碼，找到如下代碼。在默認(rèn)情況下，F(xiàn)CKeditor會(huì)調(diào)用上面定義的所有工具欄按鈕。大家可以根據(jù)自己的需求進(jìn) 行設(shè)置。表1對(duì)上面的配置選項(xiàng)功能說(shuō)明進(jìn)行匯總。代碼名稱功能代碼名稱功能Source源代碼DocProps頁(yè)面屬性-丨分隔符Save保存NewPage新建Preview預(yù)覽Templates模板Cut剪切Copy復(fù)制Paste粘貼PasteText粘貼為無(wú)格式文本PasteWord從MS Word粘貼Print打印SpellCheck拼寫(xiě)檢杳Un do撤消Redo重做Fi nd查找Rep

23、lace替換SelectAll全選RemoveFormat清除格式Form表單Checkbox復(fù)選框Radio單選框TextField單行文本Textarea多行文本Select列表菜單Butt on按鈕ImageButt on圖像域Hidde nF ield隱藏域Bold加粗Italic傾斜Un derl ine下劃線StrikeThrough刪除線Subscript下標(biāo)Superscript上標(biāo)OrderedList插入/刪除編號(hào)列表Uno rderedList插入/刪除項(xiàng)目列表Outde nt減少縮進(jìn)Indent增加縮進(jìn)JustifyLeft左對(duì)齊JustifyCe nter居中對(duì)齊Ju

24、stifyRight右對(duì)齊JustifyFull兩端對(duì)齊Li nk插入/編輯鏈接Un li nk取消鏈接An chor插入/編輯錨點(diǎn)鏈接Image插入編輯圖像Flash插入/編輯FlashTable插入/編輯表格Rule插入水平線Smiley插入表情SpecialChar插入特殊符號(hào)PageBreak插入分頁(yè)Style樣式Fon tFormat格式Fon tName字體Fon tSize大小TextColor文本顏色BGColor背景顏色FitWi ndow全屏編輯About關(guān)于 Fuckeditor表1 :工具欄配置選項(xiàng)功能進(jìn)行匯總你也可以創(chuàng)建一個(gè)非默認(rèn)的工具欄按鈕設(shè)置，您可以從FCKCo

25、nfig.ToolbarSets"Default"當(dāng)中的代碼重新復(fù)制一份，然后將 Default改成您想要的名字。注意：fckconfig.js配置選項(xiàng)采用JavaScript語(yǔ)法，如果您不懂JavaScript的話，請(qǐng)?jiān)谂渲弥斑M(jìn)行備份。筆者這里配置了一個(gè)適合于大部份網(wǎng)站使用的工欄目按鈕（取消了一些不常用的工具欄按 鈕，并重新布局）。FCKCon fig.ToolbarSets"MyDesig n"='Cut','Copy','Paste','PasteText','PasteWo

26、rd','-','U ndo','Redo','-','Fi nd','Replace','-','RemoveFormat','Li nk','U nlin k','-','Image','Flash','Table','FitWi ndow','-','Source','/''Fo ntFo

27、rmat','Fo ntSize','Bold','Italic','U nderli ne','OrderedList','U norderedList','-','Outde nt','I nde nt','JustifyLeft','JustifyCe nter','JustifyRight','TextColo門;要想使用自定義的工具欄按鈕，必須在創(chuàng)建FCKeditor實(shí)例后設(shè)置使

28、用的工具欄選項(xiàng)。$oFCKeditor->ToolbarSet = ' MyDesig n ' ; /PHP oFCKeditor.ToolbarSet = "MyDesig n"/JavaScript接下來(lái)，我們對(duì)常用的一些設(shè)置選項(xiàng)功能進(jìn)行總結(jié)，讀者可參考fckeditor目錄下fckconfig.js文件進(jìn)行閱讀。見(jiàn)表2FCKC on fig.AutoDetectLa nguage自動(dòng)語(yǔ)言檢查FCKC on fig.DefaultLa nguage默認(rèn)語(yǔ)言設(shè)計(jì)，建議改成zh-cnFCKConfig.ContextMenu右鍵菜單內(nèi)容FCKCo nf

29、ig.ToolbarStartExpa nded當(dāng)頁(yè)面載入的時(shí)候，工具欄默認(rèn)情況下是否 展開(kāi)FCKCo nfig.Fo ntColors文字顏色列表FCKCo nfig.Fo ntNames字體列表，可加入國(guó)內(nèi)常用的字體，如宋體、揩體、黑體等FCKCo nfig.Fo ntSizes字號(hào)列表FCKCo nfig.Fo ntFormats文字格式列表FCKCo nfig.StylesXmlPath指定風(fēng)格XML文件路徑FCKCo nfig.TemplatesXmlPath指定模板XML文件路徑FCKCo nfig.BodyId設(shè)置編輯器的idFCKCo nfig.BodyClass設(shè)置編輯器的c

30、lassFCKCo nfig.DefaultLi nkTarget設(shè)置鏈接默認(rèn)情況下的target屬性FCKCo nfig.BaseHref相對(duì)鏈接的基地址FCKCo nfig.Skiin Path設(shè)置默認(rèn)皮膚路徑FCKCo nfig.SmileyPath表情文件路徑，您可以設(shè)置此項(xiàng)更改表情FCKCo nfig.SmileyImage表情文件FCKCo nfig.SmileyColu mns將表情分成幾列顯示FCKCo nfig.SmileyWi ndowWidth顯示表情窗口的寬度，單位像素FCKCo nfig.SmileyWi ndowHeight顯示表情窗口的高度，單位像素表2:常用設(shè)置

31、選項(xiàng)功能匯總表2是筆者認(rèn)為最重要的幾個(gè)常選項(xiàng)，如果讀者還需要更多選項(xiàng)的詳細(xì)信息，可訪問(wèn)http:/warra 網(wǎng)址獲得。5、配置上傳文件瀏覽功能5.1、配置上傳要使您的FCKeditor能夠使用上傳功能，您必須進(jìn)行以下配制。注意：FCKeditor不支持虛擬目錄，您的路徑設(shè)置都是針對(duì)網(wǎng)站根目錄的絕對(duì)路徑而言的。 這點(diǎn)對(duì)于發(fā)布到遠(yuǎn)程網(wǎng)站目錄的開(kāi)發(fā)者極為不便，后面我們會(huì)對(duì)此進(jìn)行討論。一、打開(kāi) fckeditoreditorfilemanageruploadphpconfig.php，找至U代碼$Config'Enabled'，將值設(shè)置為 true。三、打開(kāi) fckeditor

32、9;fckconfig.js文件，找到代碼 _FileBrowserLanguage ，將值設(shè)置為 php。接下來(lái)一行，把 _QuickUploadLanguage 值也設(shè)置為 php。5.2、配置文件瀏覽一、打開(kāi) fckeditoreditorfilemanagerbrowserdefaultconnectorsphpconfig.php找到代碼$Config'Enabled'，將值設(shè)置為true;二、 接下來(lái)幾行，設(shè)置 $Co nfig'UserFilesPath'，設(shè)置瀏覽路徑。5.3、關(guān)于上傳文件瀏覽安全性問(wèn)題為了解決FCKeditor不支持虛擬目錄問(wèn)題

33、，和FCKeditor文件上傳的安全性考良。我們有必要在這里單論對(duì)此進(jìn)行討論。打開(kāi) fckeditoreditorfilemanageruploadphpconfig.php，找至U$Co nfig'UserFilesPath'代碼，在此行代碼之前定義變量$root_path =$_SERVER'PHP_SELF'重新設(shè)置$Config'UserFilesPath'變量的值，示例如下。$Co nfig'UserFilesPath' = $root_path .'您想上傳的目錄名 /'打開(kāi)fckeditoredito

34、rfilema nagerbrowserdefaultc onn ectorsphpc on fig.php,找至 U代碼$Co nfig'UserFilesPath',在此行代碼之前定義變量$root_path =$_SERVER'PHP_SELF'重新設(shè)置$Config'UserFilesPath'變量的值，示例如下。$Co nfig'UserFilesPath' = $root_path .'您想瀏覽的目錄名 /'至此，您的FCKeditor已解決不支持虛擬目錄問(wèn)題。接下來(lái)，我們介紹一種技巧配置只允許管理員才

35、可以使用FCKeditor上傳問(wèn)題。解決方法其實(shí)很簡(jiǎn)單，假如網(wǎng)站采用$_SESSION'admin_id'驗(yàn)證管理員的登錄id ,您只需將相關(guān)的腳本文件引入即可。然后使用下面的代碼配置文件上傳瀏覽開(kāi)關(guān)。$Co nfig'E nabled' = isset($SESSION'admin id');6、FCKeditor Api最詳細(xì)的FCKeditor Api文檔默過(guò)于官方wiki提供的文檔了。FCKeditor Api 官方文檔地址： 下面提供國(guó)內(nèi)某網(wǎng)友的翻譯文檔，轉(zhuǎn)載地址：FCK編輯器加載后，將會(huì)注冊(cè)一個(gè)全局的FCKeditorAPI對(duì)象。FC

36、KeditorAPI 對(duì)象在頁(yè)面加載期間是無(wú)效的，直到頁(yè)面加載完成。如果需要交互式地 知道 FCK 編輯器已經(jīng)加載完成，可使用 "FCKeditor_OnComplete" 函數(shù)。<script type="text/javascript">function FCKeditor_OnComplete(editorInstance) FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute( );</scr

37、ipt>在當(dāng)前頁(yè)獲得 FCK 編輯器實(shí)例：var Editor = FCKeditorAPI.GetInstance('InstanceName');從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實(shí)例：var Editor = window.parent.InnerDialogLoaded().FCK;從框架頁(yè)面的子框架中獲得其它子框架的 FCK 編輯器實(shí)例：var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');從頁(yè)面彈出窗口中獲得父窗口的 FCK 編輯器實(shí)例：va

38、r Editor = opener.FCKeditorAPI.GetInstance('InstanceName');獲得 FCK 編輯器的內(nèi)容：oEditor.GetXHTML(formatted); / formatted 為：truefalse，表示是否按 HTML 格式取出 也可用：oEditor.GetXHTML();設(shè)置 FCK 編輯器的內(nèi)容：oEditor.SetHTML("content", false); /第二個(gè)參數(shù)為：true|false,是否以所見(jiàn)即所得方式設(shè)置其內(nèi)容。此方法常用于 "設(shè)置初始值 "或"表單重置 "哦作。插入內(nèi)容到 FCK 編輯器：oEditor.InsertHtml("html"); / "html" 為 HTML 文本檢查 FCK 編輯器內(nèi)容是否發(fā)生變化：oEditor.IsDirty();在 FCK 編輯器之外調(diào)用 FCK 編輯器工具條命令： 命令列表如下：DocProps, Templates, Link, Unlink,

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論