CKEditor 3.x 與 Kcfinder 2.21 整合教學 所見即所得文字編輯器 + 上傳功能元件

frankyhui

嗨！各位 FDZone 的朋友們大傢好，最近小弟我在協助別人開發個人網站
因客戶有此需求，所以在此野人獻曝，與各位朋友分享 ^_^


主旨：CKEditor 3.x 與 Kcfinder 2.21 整合教學（所見即所得文字編輯器 + 上傳功能元件）
前言：
　　ckeditor是個好用的元件，但隻有華麗的文字編輯，卻沒有圖片加以陪襯，會非常可惜
　　而ckeditor上傳檔案管理的好夥伴「ckfinder」卻要收費.....欲省錢而得到最大效果，就屬此套元件 Kcfinder 瞭
基本需求：
　　PHP 5.x
　　IIS 或 Apache 等 web service
相關資料：
　　Demo：http://kcfinder.sunhater.com/demos/ckeditor
　　CKEditor官網：http://ckeditor.com/
　　Kcfinder官網：http://kcfinder.sunhater.com/

說明：
step 1.
至CKEditor官網下載原始檔（.zip格式）
http://ckeditor.com/download
解壓縮至網站根目錄
將解壓出來的資料夾命名為ckeditor（方便測試）

step 2.
至Kcfinder官網下載原始檔（.zip格式）
http://kcfinder.sunhater.com/download
解壓縮至ckeditor資料夾中
將解壓出來的資料夾改名為kcfinder（方便測試）

step 3.
至ckeditor資料中，找到config.js，開啟並將它編輯為如下<div class="blockcode"><span class="headactions" onclick="copycode($('code0'));">複製內容到剪貼板</span><h5>代碼:</h5><code id="code0">CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserBrowseUrl = '/ckeditor/kcfinder/browse.php?type=files';
config.filebrowserImageBrowseUrl = '/ckeditor/kcfinder/browse.php?type=images';
config.filebrowserFlashBrowseUrl = '/ckeditor/kcfinder/browse.php?type=flash';
config.filebrowserUploadUrl = '/ckeditor/kcfinder/upload.php?type=files';
config.filebrowserImageUploadUrl = '/ckeditor/kcfinder/upload.php?type=images';
config.filebrowserFlashUploadUrl = '/ckeditor/kcfinder/upload.php?type=flash';
};</code>

plas_hoz

要是能加精華就好了