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

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(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和MySQL5Web開(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)站：http:FCKeditorWiki:2、下載FCKedi

2、tor登錄FCKeditor官方站（），點(diǎn)擊網(wǎng)站右上角“Download”鏈接。筆者編寫(xiě)本文時(shí)，F(xiàn)CKeditor當(dāng)前最新的穩(wěn)定版本是2.4.3,因此我們下載此版本的zip壓縮格式文檔。如圖1所示：PCkodltor2»5BetaZIPFie(sourcecod自indudsd)：FCK0dFti>r_2.且康點(diǎn)擊電儀,授下隼，匕包.驚可緝隹而iiu,我MnfU必唯GZipFilecodetndiided):1(keditorFCKeditor2-4.3(LatentStable)ZIPFile(sourcecodeinduded)：FC一叫叫_GZcpFile(sourcec

3、odeincluded)；>q?tJrghtlyBuildGeneratedeverynightat0;30PSTfromourv：orfl1力帛ur_d"m?Attentich：The-ibovenightlythe"underd卑口口m良nt”version&FCKeditsr,ufuMW儂匕通butnotdeeplytested.Youcanalsotestitonline.注意：當(dāng)點(diǎn)擊“FCKeditor_243.zip”鏈接后，將跳轉(zhuǎn)到網(wǎng)站上自動(dòng)下載。如果您當(dāng)前使用Linux或Unix系統(tǒng)，可以點(diǎn)擊"FCKeditor_2.4.3.tar.

4、gz”鏈接下載.tar.gz格式的壓縮包。3、安裝FCKeditor解壓“FCKeditor_243.zip”文檔到您的網(wǎng)站目錄下，我們先假定您存放FCKeditor和調(diào)用腳本存于同一個(gè)目錄下。目錄結(jié)構(gòu)如下圖所示：G后退Q-印戶(hù)樵F：Mb8memtRoot-Eia&cd回粕國(guó)圖2：網(wǎng)站目錄結(jié)構(gòu)圖fckeditor目錄包含F(xiàn)CKeditor2.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)用FCKedi

5、tor調(diào)用FCKeditor必須先載入FCKeditor類(lèi)文件。具體代碼如下。<?phpinclude("fckeditor/fckeditor.php");/用于載入FCKeditor類(lèi)文件?>接下來(lái)，我們需要?jiǎng)?chuàng)建FCKeditor實(shí)例、指定FCKeditor存放路徑和創(chuàng)建(顯示)編輯器等。具體代碼如下所示(代碼一般放在表單內(nèi))。<?php$oFCKeditor=newFCKeditor('FCKeditor1');/創(chuàng)建FCKeditor實(shí)例$oFCKeditor->BasePath='./fckeditor/'/

6、設(shè)置FCKeditor目錄地址$FCKeditor->Width='100%'設(shè)置顯示寬度$FCKeditor->Height='300px'設(shè)置顯示高度的高度$oFCKeditor->Create();/創(chuàng)建編輯器?>下面是筆者創(chuàng)建好的實(shí)例代碼，您可將代碼保存為add_article.php。<?phpinclude("fckeditor/fckeditor.php");/用于載入FCKeditor類(lèi)文件?><html><head><metahttp-equiv="

7、Content-Type"content="text/html;charset=gb2312"><title>用PHP調(diào)用FCKeditor</title></head><body><formaction="check.php"method="post"name="exapmle"><?php$oFCKeditor=newFCKeditor('FCKeditor1');/創(chuàng)建FCKeditor實(shí)例，可創(chuàng)建多個(gè)實(shí)例$oF

8、CKeditor->BasePath='./fckeditor/'/設(shè)置FCKeditor目錄地址$oFCKeditor->Create();/創(chuàng)建編輯器?><inputname="ok"type="submit"value="提交"></form></body></html>通過(guò)瀏覽里打開(kāi)http:/you-address/add_article.php查看FCKeditor安裝效果。如圖3所示。I囿源代碼（011123t|0電魚(yú)富圃昌32戶(hù)|翻襟：囿

9、iap3屆田園一m葡Ib上u，|11=：=|»»!a|<ft4H13口-Q#*I樣式格式一字體|Arial大小I屯，J叫母初始內(nèi)容提交圖3:FCKeditor安裝成功注意：如果您想將FCKeditor創(chuàng)建為HTML結(jié)果代碼，以便于在模板引擎里面調(diào)用（如Smarty）可使用如下代碼。$output=$oFCKeditor->CreateHtml（）;現(xiàn)在，您可通過(guò)POST方式獲得編輯器的變量值。本例將表單的action設(shè)置為check.php,您可在check.php里使用代碼$fckeditorValue=$_POST'FCKeditor1'獲得

10、編輯器的變量值了。FCKeditor安裝成功了。但是，我們還可以通過(guò)更多設(shè)置來(lái)使FCKeditor更加靈活人性化。具體方法文本后面介紹。3.2、 用JavaScript調(diào)用FCKeditor調(diào)用FCKeditor必須先載入FCKeditor類(lèi)文件，但與PHP調(diào)用方法不同，應(yīng)用下面的代碼。<scripttype="text/javascript"src="./fckeditor/fckeditor.js"></script><!-載入fckeditor類(lèi)一>載入FCKeditor類(lèi)成功后，有三種方法創(chuàng)建(顯示)編輯器。一

11、：內(nèi)嵌方法(推薦)在您想要顯示FCKeditor的地方創(chuàng)建如下代碼(通常在表單里)：scripttype="text/javascript">varoFCKeditor=newFCKeditor('FCKeditorl');oFCKeditor.BasePath="./fckeditor/"oFCKeditor.Create();</script>下面是筆者創(chuàng)建好的實(shí)例代碼，您可將代碼保存為add_article_js.htmlo<html><head>scripttype="text/

12、javascript"src="./fckeditor/fckeditor.js"></script><!-載入fckeditor類(lèi)-><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用JavaScript調(diào)用FCKeditor</title></head><body><formaction="check.php"m

13、ethod="post"name="example">scripttype="text/javascript">varoFCKeditor=newFCKeditor('FCKeditorl');oFCKeditor.BasePath="./fckeditor/"oFCKeditor.Create();</script><inputname="ok"type="submit"value="提交"></

14、form></body></html>通過(guò)瀏覽里打開(kāi)http:/you-address/add_article_js.html查看FCKeditor安裝效果。效果和圖3完全一樣。同樣，如果您可以使用和前面一樣的方法取得編輯器的POST變量值。$fckeditorValue=$_POST'FCKeditor1'二：文本區(qū)域(TEXTAREA)方法同內(nèi)嵌方法一樣，也必須先載入fckeditor類(lèi)。但創(chuàng)建(顯示)編輯器同內(nèi)嵌方法不同，我們需要為window.onload定義一個(gè)函數(shù)。這樣，函數(shù)便可以在頁(yè)面加載時(shí)執(zhí)行了。函數(shù)的定義代碼如下所示。script

15、type="text/javascript">window.onload=function()varoFCKeditor=newFCKeditor('MyTextarea');oFCKeditor.BasePath="./FCKeditor/"oFCKeditor.ReplaceTextarea();</script>接著，您就可以在頁(yè)面中(通常在表單里)定義id為MyTextarea的文本區(qū)域(TEXTAREA)。代碼如下所示：<textareaid="MyTextarea"name=&quo

16、t;MyTextarea"></textarea>下面是筆者創(chuàng)建好的實(shí)例代碼，顯示效果當(dāng)然也是一樣的。筆者這里就不哆嗦了。<html><head>scripttype="text/javascript"src="./fckeditor/fckeditor.js"></script><!-載入fckeditor類(lèi)->scripttype="text/javascript">window.onload=function()(varoFCKeditor=

17、newFCKeditor('MyTextarea');oFCKeditor.BasePath="./fckeditor/"oFCKeditor.ReplaceTextarea();</script><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用JavaScript調(diào)用FCKeditor</title></head><body><formacti

18、on="check.php"method="post"name="example"><textareaid="MyTextarea"name="MyTextarea"></textarea><inputname="ok"type="submit"value="提交"></form></body></html>三：適合于Ajax的調(diào)用方法同理，您同樣需要加載類(lèi)文

19、件。然后使用下面的代碼對(duì)div元素創(chuàng)建(顯示)編輯器。vardiv=document.getElementById("myFCKeditor");使用getElementByld方法取得myFCKeditorID元素varfck=newFCKeditor("myFCKeditor");/創(chuàng)建fckeditor實(shí)例div.innerHTML=fck.CreateHtml();/使用innerHTML方法，在myFCKeditordiv元素里創(chuàng)建編輯器和使用PHPiM用fckeditor實(shí)例一樣，用javascript方法調(diào)用fckeditor實(shí)例也可以設(shè)置

20、編輯器寬度和高度等。oFCKeditor.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目錄下面的fckcon巾g.js文件，按CTRL+F搜索FCKConfig.ToolbarSets"Default"代碼，找到如下代碼。FCKConfig.T

21、oolbarSets"Default"='Source','DocProps','-','Save','NewPage','Preview','-','Templates','Cut','Copy','Paste','PasteText','PasteWord'",'Print','SpellCheck','Undo&#

22、39;,'Redo','-','Find','Replace','-','SelectAll','RemoveFormat','Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField','/'|&#

23、39;Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscrip.'OrderedList','UnorderedList','-','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull

24、','Link','Unlink','Anchor','Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak','/','Style','FontFormat','FontName','FontSize','TextC010r','BGColo門(mén)，

25、9;FitWindow','-','About'在默認(rèn)情況下，F(xiàn)CKeditor會(huì)調(diào)用上面定義的所有工具欄按鈕。大家可以根據(jù)自己的需求進(jìn)行設(shè)置。表1對(duì)上面的配置選項(xiàng)功能說(shuō)明進(jìn)行匯總。代碼名稱(chēng)功能代碼名稱(chēng)功能Source源代碼DocProps貝囿屬性-1分隔符Save保存NewPage新建Preview預(yù)覽Templates模板Cut剪切Copy復(fù)制Paste粘貼PasteText粘貼為無(wú)格式文本PasteWord從MSWord粘貼Print打印SpellCheck拼寫(xiě)檢查Undo撤消RedoMtFind查找Replace替換SelectAll全選Remo

26、veFormat清除格式Form表單Checkbox復(fù)選框Radio單選框TextField單行文本Textarea多行文本Select列表菜單Button按鈕ImageButton圖像域HiddenField隱藏域Bold加粗Italic傾斜Underline下劃線StrikeThrough刪除線Subscript下標(biāo)Superscript上標(biāo)OrderedList插入/刪除編號(hào)列表UnorderedList插入/刪除項(xiàng)目列表Outdent減少縮進(jìn)Indent增加縮進(jìn)JustifyLeft左對(duì)齊JustifyCenter居中對(duì)齊JustifyRight右對(duì)齊JustifyFull兩端對(duì)齊Li

27、nk插入/編輯鏈接Unlink取消鏈接Anchor插入/編輯錨點(diǎn)鏈接Image插入編輯圖像Flash插入/編輯FlashTable插入/編輯表格Rule插入水平線Smiley插入表情SpecialChar插入特殊符號(hào)PageBreak插入分頁(yè)Style樣式FontFormat格式FontName字體FontSize大小TextColor文本顏色BGColor背景顏色FitWindow全屏編輯About關(guān)丁Fuckeditor表1:工具欄配置選項(xiàng)功能進(jìn)行匯總你也可以創(chuàng)建一個(gè)非默認(rèn)的工具欄按鈕設(shè)置，您可以從FCKConfig.ToolbarSets"Default"當(dāng)中的代碼重

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

29、9;,'-','Find','Replace','-','RemoveFormat','Link','Unlink','-','Image','Flash','Table','FitWindow','-','Source','/','FontFormat','FontSize','Bold','Ital

30、ic','Underline','OrderedList','UnorderedList','-','Outdent','Indent','JustifyLeft','JustifyCenter','JustifyRight','TextColor'要想使用自定義的工具欄按鈕，必須在創(chuàng)建FCKeditor實(shí)例后設(shè)置使用的工具欄選項(xiàng)。$oFCKeditor->ToolbarSet='MyDesign'/PHP

31、oFCKeditor.ToolbarSet="MyDesign"/JavaScript接下來(lái)，我們對(duì)常用的一些設(shè)置選項(xiàng)功能進(jìn)行總結(jié)，讀者可參考fckeditor目錄下fckconfig.js文件進(jìn)行閱讀。見(jiàn)表2FCKConfig.AutoDetectLanguage自動(dòng)語(yǔ)言檢查FCKConfig.DefaultLanguage默認(rèn)語(yǔ)百設(shè)計(jì)，建議改成zh-cnFCKConfig.ContextMenu右鍵菜單內(nèi)容FCKConfig.ToolbarStartExpanded當(dāng)頁(yè)面裁入的時(shí)候，工具欄默認(rèn)情況下是否FCKConfig.FontColors文字顏色列表FCKConfi

32、g.FontNames字體列表，可加入國(guó)內(nèi)常用的字體，如宋體、揩體、黑體等FCKConfig.FontSizes字號(hào)列表FCKConfig.FontFormats文字格式列表FCKConfig.StylesXmlPath指定風(fēng)格XML文件路徑FCKConfig.TemplatesXmlPath指定模板X(qián)ML文件路徑FCKConfig.BodyId設(shè)置編輯器的idFCKConfig.BodyClass設(shè)置編輯器的classFCKConfig.DefaultLinkTarget設(shè)置鏈接默認(rèn)情況下的target屬性FCKConfig.BaseHref相對(duì)鏈接的基地址FCKConfig.SkinPat

33、h設(shè)置默認(rèn)皮膚路徑FCKConfig.SmileyPath表情文件路徑，您口以設(shè)置此項(xiàng)更改表情FCKConfig.SmileyImage表情文件FCKConfig.SmileyColumns將表情分成幾列顯示FCKConfig.SmileyWindowWidth顯示表情窗口的寬度，單位像素FCKConfig.SmileyWindowHeight顯示表情窗口的高度，單位像素表2:常用設(shè)置選項(xiàng)功能匯總表2是筆者認(rèn)為最重要的幾個(gè)常選項(xiàng)，如果讀者還需要更多選項(xiàng)的詳細(xì)信息，可訪問(wèn)http:5、配置上傳文件瀏覽功能5.1、 配置上傳要使，的FCKeditor能夠使用上傳功能，您必須進(jìn)行以下配制。注意：FC

34、Keditor不支持虛擬目錄，您的路徑設(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。二、接下來(lái)幾行，設(shè)置$Config'UserFilesPath',設(shè)置上傳路徑。三、打開(kāi)fckeditorfckconfig.js文件，找至U代碼_FileBrowserLanguage，將值設(shè)置為php。接下來(lái)一行，把_QuickUploadLanguage

35、值也設(shè)置為php。5.2、 配置文件瀏覽、打開(kāi)fckeditoreditorfilemanagerbrowserdefaultconnectorsphpconfig.php找到代碼$Config'Enabled',將值設(shè)置為true;二、接下來(lái)幾行，設(shè)置$Config'UserFilesPath',設(shè)置瀏覽路徑。5.3、 關(guān)于上傳文件瀏覽安全性問(wèn)題為了解決FCKeditor不支持虛擬目錄問(wèn)題，和FCKeditor文件上傳的安全性考良。我們有必要在這里單論對(duì)此進(jìn)行討論。打開(kāi)fckeditoreditorfilemanageruploadphpconfig.php,

36、找至U$Config'UserFilesPath'代碼，在此行代碼之前定義變量$root_path=$_SERVER'PHP_SELF'重新設(shè)置$Config'UserFilesPath'變量的值，示例如下。$Config'UserFilesPath'=$root_path.'您想上傳的目錄名/'打開(kāi)fckeditoreditorfilemanagerbrowserdefaultconnectorsphpconfig.php,找至U代碼$Config'UserFilesPath',在此行代碼之前定義

37、變量$root_path=$_SERVER'PHP_SELF'重新設(shè)置$Config'UserFilesPath'變量的值，示例如下。$Config'UserFilesPath'=$root_path.'您想瀏覽的目錄名/'至此，您的FCKeditor已解決不支持虛擬目錄問(wèn)題。接下來(lái)，我們介紹一種技巧配置只允許管理員才可以使用FCKeditor上傳問(wèn)題。解決方法其實(shí)很簡(jiǎn)單，假如網(wǎng)站采用$_SESSION'admin_id'驗(yàn)證管理員的登錄id,您只需將相關(guān)的腳本文件引入即可。然后使用下面的代碼配置文件上傳瀏覽開(kāi)關(guān)。

38、$Config'Enabled'=isset($SESSION'adminid');6、FCKeditorApi最詳細(xì)的FCKeditorApi文檔默過(guò)于官方wiki提供的文檔了。FCKeditorApi官方文檔地址：下面提供國(guó)內(nèi)某網(wǎng)友的翻譯文檔，轉(zhuǎn)載地址：FCK編輯器加載后，將會(huì)注冊(cè)一個(gè)全局的FCKeditorAPI對(duì)象。FCKeditorAPI對(duì)象在頁(yè)面加載期間是無(wú)效的，直到頁(yè)面加載完成。如果需要交互式地知道FCK編輯器已經(jīng)加載完成，可使用"FCKeditor_OnComplete"函數(shù)。<scripttype="text

39、/javascript">functionFCKeditor_OnComplete(editorInstance)FCKeditorAPI.GetInstance('FCKeditor1').Commands.GetCommand('FitWindow').Execute();</script>在當(dāng)前頁(yè)獲得FCK編輯器實(shí)例：varEditor=FCKeditorAPI.GetInstance('InstanceName');從FCK編輯器的彈出窗口中獲得FCK編輯器實(shí)例：varEditor=window.parent.

40、InnerDialogLoaded().FCK;從框架頁(yè)面的子框架中獲得其它子框架的FCK編輯器實(shí)例：varEditor=window.FrameName.FCKeditorAPI.GetInstance('InstanceName');從頁(yè)面彈出窗口中獲得父窗口的FCK編輯器實(shí)例：varEditor=opener.FCKeditorAPI.GetInstance('InstanceName');獲彳導(dǎo)FCK編輯器的內(nèi)容：oEditor.GetXHTML(formatted);formatted為：true|false,表示是否按HTML格式取出也可用：oEditor.GetXHTML();設(shè)置FCK編輯器的內(nèi)容：oEditor.SetHTML("content",false);/第二個(gè)參數(shù)為：true|false,是否以所見(jiàn)即所得方式設(shè)置其內(nèi)容。此方法常用于"設(shè)置初始值"或"表單重置”哦作。插入內(nèi)容

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 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ì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論