FCKeditor PHP調用筆記

之前編輯器都是使用TinyMCE,其實用起來也蠻習慣的,很多人批評TinyMCE自動加了很多不必要的HTML Tag,所以很多人不用,我用起來是還好,反正我對HTML也蠻熟的,有什麼怪怪的地方我看的出來。TinyMCE是一套優秀的網頁資料編輯器,很多地方都可以看到它的蹤影。

接下來進入FCKEditor的主題吧!先講ToolBar吧!
可以在 /fckeditor/fckconfig.js中自行定義
設定在
FCKConfig.ToolbarSets[“Name”] = [
參考下面的對照表吧!
] ;

並且在呼叫fckeditor.php後設定

參數

說明

參數

說明

Source

原始碼

DocProps

文件屬性

Save

儲存

NewPage

開新檔案

Preview

預覽

Templates

樣板

Cut

剪下

Copy

拷貝

Paste

貼上

PasteText

貼為純文字

PasteWord

從 Word 貼上

Print

列印

SpellCheck

拼字檢查

Undo

復原

Redo

復原

Find

尋找

Replace

取代

SelectAll

全選

RemoveFormat

清除格式

Form

表單

Checkbox

核取方塊

Radio

選項按鈕

TextField

文字區域

Select

下拉選單

Button

按鈕

ImageButton

影像按鈕

HiddenField

隱藏欄位

Bold

粗體

Italic

斜體

Underline

底線

StrikeThrough

刪除線

Subscript

下標字

Superscript

上標字

OrderedList

數字項目符號

UnorderedList

項目符號

Outdent

減少縮排

Indent

增加縮排

Blockquote

區塊引用

JustifyLeft

靠左

JustifyCenter

置中

JustifyRight

靠右

JustifyFull

左右對齊

Link

建立連結

Unlink

移除連結

Anchor

錨點

Image

插入圖片

Flash

插入Flash

Table

插入表格

Rule

插入水平線

Smiley

表情符號

SpecialChar

特殊符號

PageBreak

分頁符號

Style

樣式

FontFormat

字體格式

FontName

字型選擇

FontSize

字型大小

TextColor

文字顏色

BGColor

背景顏色

FitWindow

編輯器最大化

ShowBlocks

顯示HTML標籤區塊

About

關於FCKeditor

實際測試的結果,在Firefox 3.0.10中
自定的Toolbar SET會有問題,怎麼弄就是呼叫不到
網路上的做法是說,把Default的Tool Set改名
把自己定義的Tool Set設定在Default裡面就好。

外觀(Skin)的修改,也是修改fckconfig,js
FCKConfig.SkinPath = FCKConfig.BasePath + ‘skins/office2007/’ ;
把要換上的外觀(皮膚,skin)路上修改好存檔即可。
這裡可以下載FCKeditor最新的外觀(皮膚)

再來說PHP中的調用方式吧!

<?php
include_once(“./fckeditor/fckeditor.php”) ; //呼叫fckeditor的設定檔進來
$oFCKeditor = new FCKeditor(‘FCKeditor1’) ; //要傳送的變數名稱定義為FCKeditor1
$oFCKeditor->BasePath = ‘./fckeditor/’ ; //設定一下路徑
$oFCKeditor->Config[‘EnterMode’] = ‘br’; //設定換行的方式是要用BR 或是 P
$oFCKeditor->Value = ‘Some sample text here.’ ; //設定預設值
$oFCKeditor->Width = ‘547’; //設定寬度
$oFCKeditor->Height = ‘400’; //設定高度
?>
<form action=”./getdata.php” method=”post” target=””>
<?php
$oFCKeditor->Create() ; //建立FCKeditor的物件
?>
<br>
<input type=”submit” value=”Submit”>
</form>

接收的檔案叫getdata.php
內容超簡單的
<?php
$ans=stripslashes( $_POST[‘FCKeditor1’] ) ; //去掉頭尾的空白
?>

<?php echo $ans; //顯示出內容 ?>

設定模板(Template)的方式
設定檔在 \fckeditor\fcktemplates.xml
圖檔位置在 \fckeditor\editor\dialog\fck_template\images

雖然fcktemplates.xml裡面的內容是xml
也沒有這麼難啦!按照裡面的範例改一下
就可以弄出自己相要的模板,而且連預設圖案都可以放上去。
我總共設計了5個模板,請參考下圖。(PS.私人設計,恕不分享)

FCKeditor的圖片功能蠻強的,可以將圖片自己上傳到主機上,上傳之後,再從主機上選擇,選擇後,系統會自動把圖片的路徑填好。
缺點1 沒有辦法看到縮圖(有網友公佈自己修改出縮圖的方法)。
缺點2 自己上傳檔案,其實有些網路使用者認為不安全。

Filemanager要設定好才可以順利上傳
設定檔fckeditor\editor\filemanager\connectors\php
改成這樣==>
$Config[‘Enabled’] = true ;
$Config[‘UserFilesPath’] = ‘你要存放的路徑’ ;

fckconfig.js中也要改一下
var _FileBrowserLanguage = ‘php’ ; <—-設定我們所使用的語言

就可以上傳和使用檔案了

我的版型Sample

其實這樣的使用方式並不順,用FCKeditor的Filemanager來上傳檔案,仍有許多的問題,有網友把Filemanager做了修改,可以自動產生縮圖,但是這樣FCKeditor就完全失去了相容性,日後版本升級,上傳的部份就會失效,要怎麼處理呢?FCKeditor有一隻Plugin叫我CKFinder,等我有空的時候再來寫一下怎麼使用CKFinder來上傳檔案好了,當然CKFinder不是只能上傳圖片,文件(PDF,word,excel,powerpoint)等,通通都可以上傳哦!正式版是要錢的,但是Demo版的是不用錢的,Demo版的CKFinder就讓FCKeditor如虎添翼,上傳動作變的非常的順。

最後,祝大家使用愉快~