彰化一整天的論壇

 找回密碼
 立即註冊
查看: 113|回復: 0

【轉貼】CKeditor網頁編輯器與CKfinder上傳整合應用

[複製鏈接]
發表於 2018-1-4 21:51:31 | 顯示全部樓層 |閱讀模式
編輯器: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>下插入下面一段文字串

<script src="ckeditor/ckeditor.js" type="text/javascript"><!--mce:2--></script>

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

<body>
<script src="ckeditor/ckeditor.js" type="text/javascript"><!--mce:2--></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?

image

再看可否上傳檔案?

image

一切測試正常!

文章來源: http://yuhfa.blogspot.tw/2011/10/phpckeditorckfinder.html

回復

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即註冊

本版積分規則

 ㄚ母滴雞湯
 員林香純滴雞精

Archiver|手機版|小黑屋|彰化一整天的論壇(Excel,Office)  |网站地图

GMT+8, 2018-6-24 16:44 , Processed in 0.029613 second(s), 12 queries , Apc On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表