PHP環境下配置線上編輯器FCKeditor

來源:互聯網
上載者:User

  線上編輯器FCKeditor 2.0PHP環境下試用小記

  一、簡介
  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版的調用方式與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() ;   三、配置線上編輯器
  FCKeditor 2.0的設定檔為FCKeditor\fckconfig.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、  修改設定檔FCKeditor\fckconfig.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、  修改設定檔

FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php
// Get the "UserFiles" path.
$GLOBALS["UserFilesPath"] = '/UserFiles/' ;

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

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


  五、結束

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

  另,遇到的問題
  1、圖片檔案上傳路徑問題

  安裝我文章裡面的設定,上傳路徑設定為UserFiles/,但是上傳圖片檔案時,FCKeditor都自動把檔案上傳到UserFiles/image目錄下面,自做主張的建立了一個image目錄,很是不爽。原因不明。

相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。