發哥的教學網誌: PHP頁面中－CKeditor網頁編輯器與CKfinder上傳整合應用

編輯器：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

step1

下載完畢後，將二個元件放在同一目錄，並新增upload資料夾，用來存放上傳檔案。

step2

開啟ckeditor / config.js，分別新增以下語法，控制編輯器選項與啟用上傳功能。

開啟上傳功能：將下面內容加入ckeditor / config.js中

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';//可上傳Flash檔案

而成為：

/*
Copyright (c) 2003-2011, 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 example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
[
    ['Source','-','Templates','-','Cut','Copy','Paste'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Format','FontSize','-','TextColor','BGColor']
];
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';//可上傳Flash檔案

};

Step3
開啟ckfinder / config.php，找到33行將return false改成return true。

{
    // WARNING : DO NOT simply return "true". By doing so, you are allowing
    // "anyone" to upload and list the files in your server. You must implement
    // some kind of session validation here. Even something very simple as...

    // return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];

    // ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
    // user logs in your system. To be able to use session variables don't
    // forget to add session_start() at the top of this file.
return true;
//    return false; <----註解掉改為上一行的return true

}

// LicenseKey : Paste your license key here. If left blank, CKFinder will be
// fully functional, in demo mode.
$config['LicenseName'] = '';
$config['LicenseKey'] = '';

/*
Uncomment lines below to enable PHP error reporting and displaying PHP errors.
Do not do this on a production server. Might be helpful when debugging why CKFinder does not work as expected.
*/
// error_reporting(E_ALL);
// ini_set('display_errors', 1);

/*
To make it easy to configure CKFinder, the $baseUrl and $baseDir can be used.
Those are helper variables used later in this config file.
*/

Step4
接著到63行處，設定上傳的目錄位置。

Examples:
$baseUrl = 'http://example.com/ckfinder/files/';
$baseUrl = '/userfiles/';

ATTENTION: The trailing slash is required.
*/
// $baseUrl = '/ckfinder/userfiles/';註解掉改為下一行的$baseUrl = '/ckfinder/upload/';

$baseUrl = '/ckfinder/upload/';
/*
$baseDir : the path to the local directory (in the server) which points to the
above $baseUrl URL. This is the path used by CKFinder to handle the files in
the server. Full write permissions must be granted to this directory.

step5

接著在你要使用文字區域的頁面裡加入導入CKEDITOR的核心。找到其<body>下插入下面一段文字串

body {
background-color: #FFFBF0;
}
-->
</style></head>

<body>
<script src="ckeditor/ckeditor.js" type="text/javascript"></script>
<div align="center">
<h2><strong>寄信系統</strong>
</h2>
<form id="form1" name="form1" method="post" action="mail_message.php">

step6

找到你要使用CKEDITOR的文字區域的語法，加入class="ckeditor"

<td bgcolor="#D4DFFF"><div align="right"><strong>內容：</strong></div></td>
<td bgcolor="#D4DFFF"><div align="left">
<textarea name="content" class="ckeditor" id="content" cols="50" rows="20"></textarea>
</div></td>
</tr>
<tr>
<td bgcolor="#D4DFFF"></td>
<td bgcolor="#D4DFFF">

最後確認一下可否導入ckeditor？