[教學]FCKeditor 之php 初次修改版

房東：達人
發表時間：2007-05-17

◎本次修改主要為

一、上傳檔案路徑修改
二、變更樣式設定
三、語系修改為純繁體中文模式
四、字型列表修改，加入'細明體;新細明體;標楷體;'
五、fckeditor.php的修改
六、新增 Media多媒體語法樣版
七、新增上傳檔案資料夾

◎開始講解：
PHP內部設定講解，未完善部分，多多指教：
一、C:\AppServ\www\phpFLY\fckeditor目錄下：
1.fckeditor.js修改：
(1)改變fck_editorarea.css路徑位置：
第23行 FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css' ;
改
第23行 FCKConfig.EditorAreaCSS = '/phpFLY/'+FCKConfig.BasePath + 'css/fck_editorarea.css' ;

(2)改變預設樣式：
第34行 FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;
改
第34行 FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/' ;

(3)取消語系自動偵測模式：
第47行 FCKConfig.AutoDetectLanguage = true ;
改
第47行 FCKConfig.AutoDetectLanguage = false ;

(4)預設語系改為繁體中文：
第48行 FCKConfig.DefaultLanguage = 'en' ;
改
第48行 FCKConfig.DefaultLanguage = 'zh' ;

(5)加入XHTML相關設定：
第49行 FCKConfig.ContentLangDirection = 'ltr' ;
下面加入：
FCKConfig.EnableXHTML = true ; // Unsupported: Do not change.
FCKConfig.EnableSourceXHTML = true ; // Unsupported: Do not change.

(6)GeckoUseSPAN改為真：
第62行 FCKConfig.GeckoUseSPAN = false ;
改
第62行 FCKConfig.GeckoUseSPAN = true ;

(7)TabSpaces改為4：
第67行 FCKConfig.TabSpaces = 0 ;
改
第67行 FCKConfig.TabSpaces = 4 ;

(8)GeckoUseSPAN改為真：
第62行 FCKConfig.GeckoUseSPAN = false ;
改
第62行 FCKConfig.GeckoUseSPAN = true ;

(9)字型列表修改，加入'細明體;新細明體;標楷體;'：
第104行 FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
改
第104行 FCKConfig.FontNames = '細明體;新細明體;標楷體;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

(10)檔案瀏覽與上傳設定(預設的動態網頁程式語言)：
(a)第133行 var _FileBrowserLanguage = 'asp' ;
改
第133行 var _FileBrowserLanguage = 'php' ;

(b)第134行 var _QuickUploadLanguage = 'asp' ;
改
第134行 var _QuickUploadLanguage = 'php' ;

(c)並在下面加入
_QuickUploadLanguage= 'php';

(11)LinkUploadAllowedExtensions 允許上傳的附屬檔名設定：
第158行 FCKConfig.LinkUploadAllowedExtensions = "" ;
改
第158行 FCKConfig.LinkUploadAllowedExtensions = ".(rar|zip|jpg|png|jpg|gif|bmp|txt|iso|ppt|doc|xls|pdf|wma|mpeg|mp3|wmv)$" ; // empty for all

(12)新增：
第175行 FCKConfig.SmileyWindowHeight = 240 ;
下面加入
if( window.console ) window.console.log( 'Config is loaded!' ) ; // @ackager.Compactor.RemoveLine

2.fckeditor.php修改：
(1)$this->BasePath路徑修改為WWW根目錄為主：
第38行 $this->BasePath = '/fckeditor/' ;
改
第38行 $this->BasePath = '/' ;

(2)fckeditor 顯示高度：
第40行 sHeight = "200"
改
第40行 sHeight = "400"

(3)$Link 加入 "/phpFLY/"：
第71行 $Link = "{$this->BasePath}editor/{$File}?InstanceName={$this->InstanceName}" ;
改
第71行 $Link = "/phpFLY/"."{$this->BasePath}editor/{$File}?InstanceName={$this->InstanceName}" ;

(4)加入 TITLE=\"fckeditoriframe\"：
第83行 $Html .= "" ;
改
第83行 $Html .= "" ;

3.fckeditor.js 修改：
(1)路徑修改為WWW根目錄為主：
第33行 $this->BasePath = '/fckeditor/' ;
改
第33行 $this->BasePath = '/' ;

4.fcktemplates.xml新增 Media多媒體語法樣版：
(1)新增：
第97行
下面加入

(2)並自己製作template4.gif圖片放於
C:\AppServ\www\phpFLY\fckeditor\editor\dialog\fck_template\images中

二、C:\AppServ\www\phpFLY\fckeditor\editor\dialog\fck_image目錄下：
1.fck_image_preview.html修改：
(1)刪除摘要資訊：
第46行到第59行刪除以下資料：
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas feugiat consequat diam.
Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, nulla.
Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis
euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce
mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie.
Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque
egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem,
in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut
placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy
metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices,
ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris
non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas
elementum. Nunc imperdiet gravida mauris.

三、C:\AppServ\www\phpFLY\fckeditor\editor\filemanager\browser\default目錄下：
1.frmupload.html修改：
(1)加入UTF-8語法，避免BIG5亂碼：
第21行下面加入：

四、C:\AppServ\www\phpFLY\fckeditor\editor\filemanager\browser\default\connectors\php目錄下：
1.config.php修改：
(1)啟用上傳功能：
第24行 $Config['Enabled'] = false ;
改
第24行 $Config['Enabled'] = true ;

(2)設定檔案上傳路徑：
第27行 $Config['UserFilesPath'] = '/UserFiles/' ;
改
第27行 $Config['UserFilesPath'] = '/phpFLY/myUploads/' ;

(3)允許檔案上傳的附屬檔名：
第39行 $Config['AllowedExtensions']['File'] = array() ;
改
第39行 $Config['AllowedExtensions']['File'] = array('zip','rar','iso','bmp','gif','jpg','png') ;

五、C:\AppServ\www\phpFLY\fckeditor\editor\filemanager\upload\php目錄下：
1.config.php修改：
(1)啟用上傳功能：
第24行 $Config['Enabled'] = false ;
改
第24行 $Config['Enabled'] = true ;

(2)設定檔案上傳路徑：
第27行 $Config['UserFilesPath'] = '/UserFiles/' ;
改
第27行 $Config['UserFilesPath'] = '/phpFLY/myUploads/' ;

(3)允許檔案上傳的附屬檔名：
第39行 $Config['AllowedExtensions']['File'] = array() ;
改
第39行 $Config['AllowedExtensions']['File'] = array('zip','rar','iso','bmp','gif','jpg','png') ;
2.upload.php修改：
(1)無法使用檔案上傳功能提示訊息：
第35行 SendResults( '1', '', '', 'This file uploader is disabled. Please check the "editor/filemanager/upload/php/config.php" file' ) ;
改
第35行 SendResults( '1', '', '', 'This file uploader is disabled. Please check the "/phpFLY/fckeditor/editor/filemanager/upload/php/config.php" file' ) ;
(2)新增
第58行 $sType = isset( $_GET['Type'] ) ? $_GET['Type'] : 'File' ;
下面加入：
$Config["UserFilesPath"] .= $sType . "/";

六、在/phpFLY/下新增myUploads資料夾，做上傳檔案使用。
(1)myUpLoads下再新增，下列資料夾：Image、Flash、File、Media
(2)注意：檔案若上傳相同，程式會在檔案名稱最後加入(1)..以此類推。

http://www.neo.com.tw/archives/000882.html
http://www.dreamweaver.com.tw/forumDetail.asp?main_id=9418
http://ajunlee.pbwiki.com/Fckeditor%E5%AE%89%E8%A3%9D%E8%AA%AA%E6%98%8E
http://220.135.241.51/lbs/article.asp?id=771
http://blog.yam.com/BlogIndex.php?BLOG_ID=flyup&CATEGORY_ID=349346

贊助網站

廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲
完整房訊，房屋、店面熱門精選物件，廣利不動產優質仲介，房屋租賃、買賣資訊透明，交易真安心！
廣利不動產-新板特區指名度最高、值得您信賴的好房仲
您的托付,廣利用心為您服務

1 樓住戶：新手
發表時間：2007-05-19

2004年11月30日推出了FCKeditor 2.0 RC1版，據其官方網站稱︰這是FCKeditor 2.0版的第一個穩定版本。大家現下可以考慮正式使用它了。目前支援的後台語言有ASP、ASP.Net、PHP和ColdFusion。

　　筆者在經過簡單的試用發現，線上編輯器2.0版確實比1.6版有了許多的改進。首先是FCKeditor的檔案架構更加清晰，可以更方便地將其部署在自己的系統中。另外2.0版終於支援了Firefox 1.0瀏覽器，這將為FCKeditor贏得更多的使用者。廢話不多說，讓我們趕快來學習如何安裝、配置FCKeditor 2.0吧。

　　二、安裝與範例

　　首先到http://sourceforge.net/projects/fckeditor/ 下載FCKeditor 2.0 RC1（554K），並將其解壓縮到你的網站目錄裡面，並將檔案夾名改為FCKeditor。舉例來說，如果你的網站放在shaof這個目錄下面，則在這個目錄中建立3個次目錄︰

n FCKeditor︰存放從網站上下載的FCKeditor線上編輯器
n upimages︰用於存放上傳的圖片
n admin︰裡面存放測試頁面

　　網站的架構如下︰

/FCKeditor //FCKeditor目錄
/UserFiles //上傳檔案目錄
/admin
test.php //提交數據頁面
testsubmit.php //顯示數據頁面

　　進入到FCKeditor目錄下，打開_samples目錄，裡面含有各種編程語言調用FCKeditor的範例程式頁面，其中php目錄中包含著一些使用PHP來調用FCKeditor的範例，大家可以看一下，了解FCKeditord的調用方法，下面是我簡寫了一個test.php程式，放在網站根目錄下的admin目錄中︰

if($_POST["ADD"]){
$Content=$_POST['EditorDefault'];
echo $Content;
//變量$Content就是我們在FCKeditord裡面編輯的內容，這裡可以將其儲存到數據庫，代碼省略。
}

　　三、配置線上編輯器

　　FCKeditor 2.0的配置檔案為FCKeditorfckconfig.js，其中幾個重要的配置項目如下︰

　　1、工具欄的設定

　　預設情況下，FCKeditor會調用如下的工具欄按鈕，大家可以根據自己的需要進行增減。需要注意的是，2.0版與1.6版的按鈕並不完全相同，有些按鈕以及刪除或者改名了。

//##
//## Toolbar Buttons Sets
//##
FCKConfig.ToolbarSets["Default"] = [
['Source','-','Save','NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
['Image','Table','Rule','SpecialChar','Smiley'],
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
] ;

　　2、簡體中文設定

　　編輯edit/lang/fcklanguagemanager.js

　　將下面語句

FCKLanguageManager.AvailableLanguages =
{
'ar' : 'Arabic',
'bs' : 'Bosnian',
'ca' : 'Catalan',
'en' : 'English',
'es' : 'Spanish',
'et' : 'Estonian',
'fi' : 'Finnish',
'fr' : 'French',
'gr' : 'Greek',
'he' : 'Hebrew',
'hr' : 'Croatian',
'it' : 'Italian',
'ko' : 'Korean',
'lt' : 'Lithuanian',
'no' : 'Norwegian',
'pl' : 'Polish',
'sr' : 'Serbian (Cyrillic)',
'sr-latn' : 'Serbian (Latin)',
'sv' : 'Swedish'
}

　　添加一行 'zh-cn' : 'Chinese' 從而變成

FCKLanguageManager.AvailableLanguages =
{
'ar' : 'Arabic',
'bs' : 'Bosnian',
'ca' : 'Catalan',
'en' : 'English',
'es' : 'Spanish',
'et' : 'Estonian',
'fi' : 'Finnish',
'fr' : 'French',
'gr' : 'Greek',
'he' : 'Hebrew',
'hr' : 'Croatian',
'it' : 'Italian',
'ko' : 'Korean',
'lt' : 'Lithuanian',
'no' : 'Norwegian',
'pl' : 'Polish',
'sr' : 'Serbian (Cyrillic)',
'sr-latn' : 'Serbian (Latin)',
'sv' : 'Swedish',
'zh-cn' : 'Chinese'
}

　　然後到這裡http://www.shaof.com/download/zh-cn.js下載漢化好的zh-cn.js儲存到editor/lang目錄下即可。

　　四、設定檔案上傳

　　FCKeditor 2.0線上編輯器採用了一種名為“Connector”（連接器）的技術來實現對檔案的瀏覽以及上傳。下圖顯示了檔案瀏覽的工作流程圖。

　　從圖中可以看出，當客戶端向伺服器發出一個檔案操作請求後，Connector就會對此請求進行附應，在伺服器的檔案系統中進行執行操作，如︰檔案和檔案夾的瀏覽以及創建操作。最後將結果以XML的格式回應給客戶端。具體的技術細節大家可以閱讀FCKeditor自帶的說明指南。

　　落實到應用，首先我們要選擇一個後台語言用來實現這個功能，這裡我們以PHP為例進行說明。

　　1、修改配置檔案FCKeditorfckconfig.js中的兩段內容

//Link Browsing
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/php/connector.php" ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ; // 70%
FCKConfig.LinkBrowserWindowHeight = screen.height * 0.7 ; // 70%
//Image Browsing
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image Connector=connectors/php/connector.php" ;
FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ; // 70% ;

　　2、修改配置檔案

FCKeditoreditorfilemanagerbrowserdefaultconnectorsphpconnector.php
// Get the "UserFiles" path.
$GLOBALS["UserFilesPath"] = '/UserFiles/' ;

　　UserFiles為檔案上傳的路徑，與本文開頭所給的例子相對應，大家可以自行修改。

　　好啦，只需要兩步就完成了檔案上傳的配置工作，真是簡單呀。以後我們透過FCKeditor上傳的檔案都會儲存在網站的UserFiles目錄下。

　　五、結束

　　最後大家可以把FCKeditor目錄下的_docs和_samples兩個目錄刪除以節省空間。本文是筆者以前寫過的一篇名為《線上編輯器FCKeditor在PHP中的使用方法》（1.6版）文章的升級版本，文章如有不妥之處，還請大家指正。

　　另，遇到的問題

　　1、圖片檔案上傳路徑問題

　　安裝我文章裡面的設定，上傳路徑設定為UserFiles/，但是上傳圖片檔案時，FCKeditor都自動把檔案上傳到UserFiles/image目錄下面，自做主張的建立了一個image目錄，很是不爽。原因不明。
　　//引入線上編輯器
　　include("../FCKeditor/fckeditor.php") ;
　　這裡我們先看一下調用FCKeditor的函數，2.0版的調用模式與1.6版變化不大，如果你以前安裝過FCKeditor 1.6，那麼只需要修改很少的代碼升級到2.0。
　　FCKeditor( instanceName[, width, height, toolbarSet, value]
引用值含義
　　InstanceName 實例化編輯器所需的唯一名稱
　　Width 編輯器的寬度，單位為象素或者百分比（可選擇的，預設為︰100%）
　　Height 編輯器的高度，單位為象素或者百分比（可選擇的，預設為︰200）
　　ToolbarSet 工具欄的名稱（可選擇的，預設為︰Default）
　　Value 編輯器的內容（HTML）初始值（可選擇的）

　　好啦，下面就讓我們利用這個函數來定製FCKeditor吧。

$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '../FCKeditor/' ;
$oFCKeditor->ToolbarSet = 'Default' ;
$oFCKeditor->InstanceName = 'EditorDefault' ;
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '400' ;
$oFCKeditor->Create() ;

　共 1 人回應　　選擇頁數【第1 頁】

姓名：

佈告內容：

其他選項: