FCKeditor 的配置和使用方法

FCKeditor 的配置和使用方法
2007年06月09日 星期六 11:05

/*
author welefen
if you have any questions,please contact me by email or qq
Email:[email protected] or [email protected]
QQ:499979038
*/
FCKeditor 是一個十分強大的網頁文本編輯器,它支持多種腳本編程語言和支持多國語言。
如果你還不知道或者你知道還不會配置這個的話,請你繼續往下看。

我用是FCKeditot的版本是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=Default" frameBorder=0 width=100% scrolling=no height=300>
</IFRAME>

對上述兩種方法的說明:

在上述兩種方法中,你都看到了字符串'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','RemoveLink','-','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,其他語言的一些目錄也都可以刪除,這樣就減小了文件的大小.


 
發佈了30 篇原創文章 · 獲贊 0 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章