CKEditor是一個專門使用在網頁上屬於開放原始碼的所見即所得 (WYSIWYG)文字編輯器，FCKeditor是它的前身。CKEditor不提供檔案上傳功能，如果要實現上傳功能則需要使用CKFinder。
1、下載CKEditor和CFinder
CKEditor：http://ckeditor.com/download
CKFinder：http://ckfinder.com/download
本人用的版本：ckeditor 4.0.1+ckfinder 2.3.1
2、解壓安裝
將CKEditor解壓之後，將其中的ckeditor放到網站根目錄下
將CKFinder解壓之後，將其中的ckfinder放到/ckeditor/下
3、用戶端網頁代碼
包括載入ckeditor.js、載入ckfinder.js、建立CKEditor執行個體、為CKFinder設定CKEditor。
先要在ckeditor/config.js裡面對上傳進行配置，加入如下代碼：
/** * @license Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved. * For licensing, see LICENSE.html or http=//ckeditor.com/license */CKEDITOR.editorConfig = function( config ) {// Define changes to default configuration here.// For the complete reference:// http://docs.ckeditor.com/#!/api/CKEDITOR.config// The toolbar groups arrangement, optimized for two toolbar rows.config.toolbarGroups = [{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },{ name: 'links' },{ name: 'insert' },{ name: 'forms' },{ name: 'tools' },{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },{ name: 'others' },'/',{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },{ name: 'styles' },{ name: 'colors' },{ name: 'about' }];// Remove some buttons, provided by the standard plugins, which we don't// need to have in the Standard(s) toolbar.config.removeButtons = 'Underline,Subscript,Superscript';//下面是增加的配置代碼config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';};
然後在html裡加入相應js資訊,html代碼如下：
<!DOCTYPE html><html><head><title>Replace Textarea by Code — CKEditor Sample</title><meta charset="utf-8"><script src="/ckeditor/ckeditor.js"></script><!--引入相關js--><script src="/ckeditor/ckfinder/ckfinder.js"></script><script src="/ckeditor/config.js"></script><!--引入ckeditor配置--><link href="/ckeditor/content.css" rel="stylesheet"></head><body><form action="sample_posteddata.php" method="post"><textarea cols="80" id="editor1" name="editor1" rows="10"></textarea><script>// This call can be placed at any point after the// <textarea>, or inside a <head><script> in a// window.onload event handler.// Replace the <textarea id="editor"> with an CKEditor// instance, using default configurations.CKEDITOR.replace( 'editor1');</script><p><input type="submit" value="Submit"></p></form></body></html>
4、伺服器PHP代碼
寫一個sample_postdata.php用來接收CKEditor傳過來的資料，通過用戶端網頁textarea名字作為欄位名來從$_POST中擷取。傳過來的資料是通過轉義了的，所有的',",\前面都加上了反斜線，所以如果要將資料存資料庫，資料不需要再轉義。如果要將資料直接當成網頁代碼顯示，則在echo之前需要調用stripslashes將所有的反斜線去掉。
sample_postdata.php
<?php $content=$_POST['editor1'];?><!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=utf-8" /><title>CKEditor and CKFinder serverside</title></head><body><?php echo stripslashes($content);?></body></html>
5、實現上傳檔案功能的其他必要配置
（1）/ckeditor/ckfinder/config.php
將其中的$baseUrl設定為$baseUrl = '/ckeditor/ckfinder/userfiles/';，這個設定的是上傳檔案的存放位置
將其中CheckAuthentication中的return false;改為return true;，這個是設定上傳許可權，如果只讓授權使用者上傳檔案，那麼這裡可以通過SESSION做一些處理，比如SESSION裡有一個欄位表示使用者是否是已經登入過，是就return true，否就return false。
function CheckAuthentication(){
return true;
}
（2）/ckeditor/config.js
在CKEDITOR.editorConfig = function( config )函數體中添加一句：
config.font_names = '宋體;楷體_GB2312;新宋體;黑體;隸書;幼圓;微軟雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';
這裡設定CKEditor中能使用的字型，CKEditor預設情況下只有英文的字型。
6、測試與授權提示的去除
測試圖片上傳，看看是否出現了如下畫面，其中紅線內的按鈕就是上述步驟的成果
（1）去掉圖片列表左下角的授權資訊方法：
在ckfinder/ckfinder.js尋找
var p="\x3c\x64\151\x76\040\143\x6c\141\x73\163\075\x27\166\151\x65\167\040\x74\x6f\157\154\x5f\160\x61\156\x65\x6c\x27\x20\163\164\x79\154\145\075\x27\x70\141\x64\x64\x69\156\x67\072\062\x70\170\073\x64\151\x73\x70\154\x61\x79\072\x62\154\157\143\x6b\040\x21\x69\x6d\x70\157\x72\x74\141\156\164\073\x70\157\x73\151\164\151\x6f\x6e\072\163\x74\x61\x74\151\143\x20\041\x69\155\160\x6f\162\164\x61\x6e\164\073\x63\157\x6c\x6f\x72\x3a\142\154\141\143\153\040\041\x69\155\x70\x6f\x72\164\x61\156\x74\073\142\141\x63\x6b\147\162\x6f\165\156\144\055\x63\x6f\x6c\157\x72\x3a\x77\x68\x69\x74\145\x20\x21\151\155\x70\157\x72\164\x61\156\x74\x3b\x27\076",q="\x3c\x2f\144\x69\x76\076",r=p+"\x54\150\x69\163\040\x69\x73\x20\x74\150\145\x20\x44\105\x4d\x4f\x20\166\145\162\x73\x69\x6f\x6e\x20\157\146\040\x43\x4b\x46\151\156\x64\145\x72\x2e\040\x50\x6c\x65\x61\x73\145\040\x76\x69\x73\x69\x74\x20\164\x68\x65\x20\074\141\040\150\162\145\x66\x3d\047\150\164\x74\160\x3a\057\x2f\x63\153\163\x6f\x75\x72\143\x65\056\143\x6f\x6d\057\x63\x6b\x66\151\156\x64\145\x72\047\040\x74\141\x72\147\145\164\x3d\x27\137\x62\x6c\x61\156\x6b\047\076\x43\x4b\x46\151\156\144\145\162\x20\x77\x65\142\x20\163\151\164\145\074\057\141\076\040\x74\157\x20\x6f\x62\164\x61\x69\x6e\040\x61\040\x76\x61\154\x69\144\x20\154\151\x63\145\x6e\163\x65\056"+q,s=p+"\x43\113\x46\151\156\x64\x65\x72\x20\x44\145\166\145\x6c\x6f\x70\145\162\040\114\151\x63\145\156\x73\145\x3c\142\x72\x2f\x3e\x4c\151\x63\x65\x6e\163\x65\x64\040\164\157\x3a\040";
替換成：
var p="\x20",q="\x20",r=p+"\x20"+q,s=p+"\x20";
（2）去掉檔案清單上方顯示的This is the DEMO version of CKFinder. Please visit the CKFinder web site to obtain a valid license字樣
在ckfinder/ckfinder.js尋找
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');this.tools.of().setHtml(T.mj)}
改成：
if((T.eu&& !Y||X)&&T.mj){V.addClass('files_message');if(T.mj==M)this.tools.of().hide();else{this.tools.of().setHtml(T.mj);this.tools.of().show()}}
7、範例程式碼下載
點擊下載
聽說百度的ueditor也蠻強大的，有時間去研究一下。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
