21-PHP環境下的FCKEditor編輯器的配置

時間 2020-07-19

原文原文鏈接

21-PHP環境下的FCKEditor編輯器的配置

今天有朋友問PHP環境下的FCKEditor編輯器的配置問題，那麼咱們今天就來看一下下吧！

在咱們使用PHP開發WEB項目的時候，常常會使用多行文本框來收集信息，如新聞系統的新聞正文、論壇的帖子正文等。並且咱們常常須要對多行文本框的內容進行修飾（如字體、字號等），若是咱們經過JS來實現的話，其操做過程是很是繁瑣的。如今比較經常使用的是FCKEditor編輯器來實現，經過這個編輯器咱們能夠輕鬆的控制內容的樣式。如今，咱們就來看看在PHP下如何來配置FCKEditor編輯器。

1. 下載FCKEditor編輯器

網址: http://ckeditor.com/download

在衆多的版本中，咱們選擇2.6.5版便可。

2. 將下載的文件解壓到主目錄，解壓後的效果以下(圖1、二所示)

3. 將解壓後的文件保留editor文件夾、fckconfig.js、fckeditor.js、fckeditor.php、fckeditor_php4.php、fckeditor_php5.php、fckpackager.xml、fckstyles.xml、fcktemplates.xml後，刪除其餘文件。(以下圖)

4. 安裝

FCKEditor的安裝是很是簡單的：只須要在相關的網頁中包含fckeditor.php文件便可

如require_once(「fckeditor.php」);

當把fckeditor.php文件包含過來之後，安裝程序就算完畢了，那麼關鍵的問題是如何來應用FCKEditor編輯器

FCKEditor編輯器的實現是經過OOP的編程方式實現的，因此在應用以前必須先行建立對象(或者稱爲實例)，其語法結構以下：

$FCKEditorObj = new FCKEditor(「實例名稱」) ;

這裏的」實例名稱」其實指得是多行文本框的名稱，因此，咱們必須賦予含義明確的名稱。如

$FCKEditorObj = new FCKEditor(「content」);

5. FCKEditor對象的屬性

Width

功能：設置/獲取編輯器的寬度

語法：

$對象名稱 -> Width = 「值」;

$變量名稱 = $對象名稱 -> Width;

Height

功能：設置/獲取編輯器的高度

語法：

$對象名稱 -> Height = 「值」;

$變量名稱 = $對象名稱 -> Height;

說明：

編輯器的默認寬度爲100%；默認的高度爲200像素

另外，在用戶設置寬度或高度時，若是指定的單位爲像素，那麼能夠直接書寫寬度/高度值，而無需指定單位，但指定的單位爲百分比時，則必須指定單位--%

如

$FCKEditorObj –> Width = 「85%」;

$FCKEditorObj -> Height = 「400」;

ToolbarSet

功能:獲取/設置編輯器使用的工具欄

語法:

$對象名稱 -> ToolbarSet = 「工具欄名稱」;

$變量名稱 = $對象名稱 -> ToolbarSet;

說明:

系統默認的工具欄有:Default和Basic兩個

BasePath

功能：獲取/設置編輯器所在的路徑

語法:

$對象名稱 -> BasePath = 「路徑」;

$變量名稱 = $對象名稱 -> BasePath;

Value

功能:設置/獲取編輯器的初始值

語法:

$對象名稱 -> Value = 「值」;

$變量名稱 = $對象名稱 -> Value;

說明：在通常狀況下，只有在修改內容時纔會設置初始值；

Config

功能：獲取/設置編輯器的配置參數

語法:

$對象名稱 -> Config[‘參數’] = 值;

$變量名稱 = $對象名稱 -> Config[‘參數’];

對於參數，咱們之後再詳細來了解！

6. FCKEditor對象的方法

Create()

功能：顯示FCKEditor編輯器

語法:

$對象名稱 -> Create();

CreateHtml()

功能:返回運行FCKEditor編輯器的必須的HTML代碼

語法:

$變量名稱 = $對象名稱 -> CreateHtml();

其實，Create()方法就是將CreateHtml()方法的返回結果給輸出了！

咱們先來看一個簡單的例子！

<?php

require_once "editor/fckeditor.php";

$oFCKeditor = new FCKeditor("content");

$oFCKeditor -> Width = "100%";

$oFCKeditor -> Height = "350";

$oFCKeditor -> ToolbarSet = "Default";

$oFCKeditor -> BasePath = "editor/";

$html = $oFCKeditor -> CreateHtml();

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />

< title > 發表主題 </ title >

< link href = "style/common.css" rel = "stylesheet" type = "text/css" media = "all" />

</ head >

< body >

< div id = "container" >

< h1 id = "title" > 發表主題 </ h1 >

< form id = "form1" name = "form1" method = "post" action = "post.php" >

< table border = "0" cellspacing = "0" cellpadding = "0" >

< tr >

< th > 主題 : </ th >

< td >< input name = "subject" type = "text" class = "subject" id = "subject" /></ td >

</ tr >

< tr >

< th > 正文 : </ th >

< td > <? = $html ?> </ td >

</ tr >

< tr >

< th >   </ th >

< td >< input name = "submit" type = "submit" id = "submit" value = " 發表主題 " /></ td >

</ tr >

</ table >

</ form >

</ div >

</ body >

</ html >

運行結果以下：

那麼，咱們如今的問題是如何獲取輸入的內容?

咱們剛剛提到過，其實在建立FCKEditor對象時的參數，其實也就是多行文本框的名稱，對於有OOP編程經驗的人來講，對於這行代碼應該是很清楚的！

class FCKeditor

{

public function __construct( $instanceName )

{

$this->InstanceName = $instanceName ;

$this->BasePath = '/fckeditor/' ;

$this->Width = '100%' ;

$this->Height = '200' ;

$this->ToolbarSet = 'Default' ;

$this->Value = '' ;

$this->Config = array() ;

}

和

$Html .= "<textarea name=\"{$this->InstanceName}\" rows=\"4\" cols=\"40\" style=\"width: {$WidthCSS}; height: {$HeightCSS}\">{$HtmlValue}</textarea>";

而對於沒有OOP經驗的人來講，這些東東，咱們會在之後的博文中陸續來介紹！
既然多行文本的名稱肯定了，那麼一切就能夠搞定了！

7. 獲取多行文本框的值

$變量名稱 = $_POST[「表單元素名稱」];

源碼以下:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" >

< head >