之前編輯器都是使用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 貼上 |
|
列印 |
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如虎添翼,上傳動作變的非常的順。
最後,祝大家使用愉快~
隨機文章
- Notion 測試 還不能滿足我日常使用的部份 (2021-03-23)
- 我知道Google為什麼不愛我了 (2011-03-03)
- Proxmox VE ubuntu 2004 container RLIMIT_CORE issue (2020-07-24)
- Google魯賓 要讓Gphone酷斃了 (2007-11-06)
- 讓 HeiDiSQL 連線 MySQL Server (2020-07-23)
fckeditor有其他的plugin可以用
讓我們直接上傳圖檔後就可以看到縮圖
正式版需要收錢 demo版免費
名字叫 ckfinder
今天花了3個小時來玩了一下ckfinder
界面還OK
只是那串demo的字很不順眼
(目前有看到中國那邊有放出破解版)