Ckeditor 強力線上編輯程式

ckeditor 是一個很強大的上傳PHP圖文編輯器

下載的載點跟網址如下:

編輯器：CKeditor
支援語法：PHP、ASP、ASP.NET、CF
檔案大小：1.99MB
元件版本：3.5.1
官方展示：http://ckeditor.com/demo
官方下載：http://ckeditor.com/download

---

上傳元件：CKfinder
檔案大小：1.01MB
支援語法：PHP、ASP、ASP.NET、CF
元件版本：2.0.1
官方展示：http://ckfinder.com/demo 
官方下載：http://ckfinder.com/download

步驟1:
下載完畢後，將兩個檔案放在同一層資料夾 解壓縮，
建立一個upload資料夾用來放置上傳檔案的位置。

如laravel 架構:
在public/js 放置ckeditor,ckfinder 檔案，
在public/js 放置upload為上傳存放資料夾




步驟2:
在ckfinder裡面->config.php ，

baseurl設定上傳存放資料夾的目錄:
$baseUrl = 'http://localhost/laravel/public/js/upload/';



步驟3: 

!!!如果更改config.js 沒有效果，請關閉分頁，重新打開讓他生效!!!

在ckeditor裡面->config.js ，
設定瀏覽器編輯圖片功能顯示的資料夾 位置

config.filebrowserBrowseUrl = 'js/ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'js/ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案
config.filebrowserImageUploadUrl = 'js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔
config.filebrowserFlashUploadUrl = 'js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案

步驟4:
在ckeditor裡面->config.js檔案，可以設定編輯器的功能

 //全功能
 config.toolbar_Full = [
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
     ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
     ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
     ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
     ['Styles','Format','Font','FontSize'],
     ['TextColor','BGColor']
 ];

 config.js 所設定的編輯器參數如下


工具列參數列表：
'Source'：原始碼
'Save'：儲存
'NewPage'：開新檔案
'Preview'：預覽
'Templates'：樣版

'Cut'：剪下
'Copy'：複製
'Paste'：貼上
'PasteText'：貼為文字格式
'PasteFromWord'：從word 貼上
'Print'：列印
'SpellChecker'：拼字檢查
'Scayt'：即時拼寫檢查

'Undo'：上一步
'Redo'：重作
'Find'：尋找
'Replace'：取代
'SelectAll'：全選
'RemoveFormat'：清除格式

'Form'：表單
'Checkbox'：核取方塊
'Radio'：單選按鈕
'TextField'：文字方塊
'Textarea'：文字區域
'Select'：選單
'Button'：按鈕
'ImageButton'：影像按鈕
'HiddenField'：隱藏欄位

'Bold'：粗體
'Italic'：斜體
'Underline'：底線
'Strike'：刪除線
'Subscript'：下標
'Superscript'：上標
'NumberedList'：編號清單
'BulletedList'：項目清單
'Outdent'：減少縮排
'Indent'：增加縮排
'Blockquote'：引用文字

'JustifyLeft'：靠左對齊
'JustifyCenter'：置中
'JustifyRight'：靠右對齊
'JustifyBlock'：左右對齊

'Link'：超連結
'Unlink'：移除超連結
'Anchor'：錨點

'Image'：圖片影像
'Flash'：Flash
'Table'：表格
'HorizontalRule'：水平線
'Smiley'：表情符號
'SpecialChar'：特殊符號
'PageBreak'：分頁符號

'Styles'：樣式
'Format'：格式
'Font'：字體
'FontSize'：大小

'TextColor'：文字顏色
'BGColor'：背景顏色

'Maximize'：最大化
'ShowBlocks'：顯示區塊
'About'：關於CKEditor