DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> FCKeditor的配置和使用方法
FCKeditor的配置和使用方法
編輯:AJAX詳解     

FCKeditor是一個十分強大的網頁文本編輯器,它支持多種腳本編程語言和 
                       支持多國語言。如果你還不知道或者你知道還不會配置這個的 
話,請你繼續往下看。

    我用是 FCKeditor 的版本是2.1,不過現在已經有 FCKeditor 2.3.2 released 版本 
了,你可以到他的官方網站上去下載 >http://www.FCKeditor.Net/。

    本文介紹的是關於 PHP 的配置方法,其他語言的配置方法是和它一樣的。

    假設網站的目錄為:

    \www 
    \index.PHP 
    \inc 
    \FCKeditor

一、調用 FCKeditor 的兩種方法 

1、通過創建實例 

    在這裡只寫調用它的代碼了,網站的其他代碼當然由你自己寫了,把下面的代碼加在需 
要編輯器的地方:

 <?PHP  
  include_once("FCKeditor/fckeditor.php");//引用 FCKeditor.PHP 這個文件  
 $FCKeditor=new FCKeditor('welefen');//創建 FCKeditor 對象的實例  
 $FCKeditor->BasePath='FCKeditor/';//FCKeditor 所在的位置,這裡它的位置就是 
 'FCKeditor/';  
 $FCkeditor->ToolbarSet='Default'; //工具按鈕設置  
 $FCKeditor->Width='100%'; //設置它的寬度  
 $FCKeditor->Height='300px'; //設置它的高度  
 $FCkeditor->Create();  
 ?> 

2、通過 iframe 調用創建 

     在你認為該加的地方加上 :

<INPUT id=content style="DISPLAY: none" type=hidden name="welefen">  
 <INPUT id=content___Config style="DISPLAY: none" type=hidden>  
 <IFRAME id=content___Frame  
  src="FCKeditor/editor/fckeditor.Html?InstanceName=welefen&amp;Toolbar=Defaul 
 t" frameBorder=0 width=100% scrolling=no height=300>  
 </IFRAME> 

3、對上述兩種方法的說明

     在上述兩種方法中,你都看到了字符串'welefen',你可能不知道是什麼意思,現在我 
給你解釋一下,如果你要將文本編輯器中的內容在另外一個頁面顯示或者要將在它保存在數 
據庫,你可以用$_POST['welefen']或者用$_GET['welefen']來獲取文本編輯器中的內容, 
具體是用 post 還是用 get 那要看你用的是什麼傳遞方法了,當然你也可以把 welefen 改 
成你想要用的,如'content'.

     如果你還不知道什麼是 AJax,那麼這一段話你就不用看了。

     當你用AJax 的來獲得內容的時候是不是發現得不到內容,如: 
     <script>alert(document.form.content.value)</script>你會發現談出的窗口 
沒內容 
     那麼我們可以通過下面的代碼來獲得它的內容:

 function getContentValue()  
  {  
     var oEditor = FCKeditorAPI.GetInstance('content') ;  
     var acontent=oEditor.GetXHtml();  
     return acontent;  
  } 

二:配置一些文件 

 1:fckconfig.JS 的配置 

    (1).工具按鈕設置  
    查找 FCKConfig.ToolbarSets["Default"],這裡有很多按鈕,下面我們將對他們詳 
細介紹

EditSource 顯示Html源代碼 StrikeThrough 刪除線 

Save 保存 Subscript 下標 

NewPage 新建空白頁面 Superscript 上標 

PrevIEw 預覽 JustifyLeft 左對齊 

Cut 剪切 JustifyCenter 居中對齊 

Copy 復制 JustifyRight 右對齊 

Paste 粘貼 JustifyFull 兩端對齊  

PasteText 純文本粘貼 InsertOrderedList 自動編號 

PasteWord 來自Word的粘貼 InsertUnorderedList 項目符號 

Print 打印 Outdent 減少縮進 

SpellCheck 拼寫檢查 Indent 增加縮進 

Find 查找 ShowTableBorders 顯示表格線 

Replace 替換 ShowDetails 顯示明細 

Undo 撤銷 Form 添加Form動作 

Redo 還原 Checkbox 復選框 

SelectAll 全選 Radio 單選按鈕 

RemoveFormat 去除格式 Input 單行文本框 

Link 插入/編輯 鏈接 Textarea 滾動文本框 

RemoveLink 去除連接 Select 下拉菜單 

Anchor 錨點 Button 按鈕 

Image 插入/編輯 圖片 ImageButton 圖片按鈕 

Table 插入/編輯 表格 Hidden 隱藏 

Rule 插入水平線 Zoom 顯示比例 

SpecialChar 插入特殊字符 FontStyleAdv 系統字體 

UniversalKey 軟鍵盤 FontStyle 字體樣式 

Smiley 插入表情符號 FontFormat 字體格式 

About 關於 Font 字體 

Bold 粗體 FontSize 字體大小 

Italic 斜體 TextColor 文字顏色 

Underline 下劃線 BGColor 背景色 

    這個默認的是包含了所有的工具按鈕,不過到我們具體要用的時候,有的按鈕並不需要, 
而且還影響速度。那麼我們可以將我們不需要的按鈕給刪了。下面是我的配置,給大家一個 
參考,當然你可以根據你的喜好。

 FCKconfig.ToolbarSets["Default"] = [  
  ['EditSource','Save','NewPage','PrevIEw','-','Cut','Copy','Paste','PasteText 
  ','-','Find','Replace','-','Undo','Redo','-','SelectAll','-','Link','RemoveL 
  ink','-','Image','Table','Rule','SpecialChar','Smiley'] ,  
  ['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight 
  ','-','InsertOrderedList','InsertUnorderedList','-','Form','Checkbox','Radio 
  ','Input','Textarea','Select','Button','-','FontStyleAdv','TextColor'] ] ; 

    如果在前台給用戶回復一寫帖子的話,還是沒必要要上面的,這時你可以在加一個:

 FCKConfig.ToolbarSets["Basic"] = [  
      ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink',' 
 -','About']  
  ] ; 

    這樣的話,你在前台調用的時候就要用$FCKeditor->ToolbarSet='Basic',不能再為 
"Default"了。 

(2):語言的配置  
     查找 FCKConfig.DefaultLanguage 將它設置為'zh-cn'.

     (3):腳本語言的設置  
     查找var _FileBrowserLanguage 和var _QuickUploadLanguage 將他們設置為 
'PHP', 默認是'ASP',如果這裡不設置的話,圖片將不能上傳,這點很重要。當時我在用 
FCKeditor 由於沒配置這個,不能上傳圖片,而我同寢室的用ASP 能上傳圖片,讓我煩惱 
了好多天,最後終於找到是這個原因。

2:圖片上傳的配置 

    打開文件

FCKeditor/editor/filemanager/browser/default/connectors/php/config.PHP
    查找$Config['Enabled'],將它設置為'true' 
    查找$Config['UserFilesPath'],將它設置圖片的目錄,這個目錄是相對於主目錄的。 
    例如:我寫了一個 blog,就可以設置為/blog/upload/

    打開文件 FCKeditor/editor/filemanager/upload/php/config.PHP 
    查找$Config['Enabled'],將它設置為'true' 
    查找$Config['UseFileType'],將它設置上傳文件的目錄,最好與上面的圖片目錄相 
同。

    好了,現在所有的配置都已經完成了,現在你要做的只是刪除一些不必要的文件了。 
    只要包含'_'的目錄名和文件名都可以刪除,當然你用的是 PHP,其他語言的一些目錄 
也都可以刪除,這樣就減小了文件的大小.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved