編輯器：CKeditor
支援語法：PHP、ASP、ASP.NET、CF
官方展示：http://ckeditor.com/demo
官方下載：http://ckeditor.com/download
上傳元件：CKfinder
支援語法：PHP、ASP、ASP.NET、CF
官方展示：http://ckfinder.com/demo
官方下載：http://ckfinder.com/download
step1
下載完畢後，將二個元件放在同一目錄，並新增upload資料夾，用來存放上傳檔案。
假設資料夾與網頁檔案皆為同一層級的情況
WEB-
[ckeditor]
[ckfinder]
[upload]
step2
開啟ckeditor / config.js，分別新增以下語法，控制編輯器選項與啟用上傳功能。
開啟上傳功能：將下面內容加入ckeditor / config.js中(紅字為新增部份, 其他不改變)
==================以下為檔案 config.js 內容=======================================
/**
* @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or http://ckeditor.com/license
*/
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserBrowseUrl = './objects/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檔案
};
==================以上為檔案 config.js 內容=======================================
Step3
開啟ckfinder / config.php，找到33行將return false改成return true。
==================以下為檔案 config.php 部份內容=======================================
function CheckAuthentication()
{
// 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; <<<<將此備註不用
}
// LicenseKey : Paste your license key here. If left blank, CKFinder will be
// fully functional, in demo mode.
$config['LicenseName'] = '';
$config['LicenseKey'] = '';
==================以上為檔案 config.php 部份內容=======================================
Step4
接著到63行處，設定上傳的目錄位置。
==================以下為檔案 config.php 部份內容=======================================
Examples:
$baseUrl = 'http://example.com/ckfinder/files/';
$baseUrl = '/userfiles/';
ATTENTION: The trailing slash is required.
*/
// $baseUrl = '/ckfinder/userfiles/'; <<<預設設定,將此備註不用
$baseUrl = '/upload/'; <<<<<<檔案上傳存放的路徑
/*
==================以上為檔案 config.php 部份內容=======================================
Step5
在需要的網頁上在<head></head>中加入以下code
<script src="./ckeditor/ckeditor.js" type="text/javascript"><!--mce:2--></script>
接著在需要的表單種使用textarea, 並加入class="ckeditor".
Eg:
送出端
<form id="edit_about" name="edit_about" method="POST" action="edit_about_s11.php">
<textarea name="edit1" id="edit1" class="ckeditor" cols="40" rows="10"></textarea>
<input type="submit" value="編輯完成送出" style="color:#178951;background-color:#D6FFAF" name="submit">
</form>
接收端
<?php
//接收表單資料
$edit1 = $_POST["edit1"];
echo $edit1;
?>
以上~ ....資料~來源~google大神~~~~百拜~~
