close

原文網址:http://is90057.pixnet.net/blog/post/28095884-ckeditor%E8%A8%AD%E5%AE%9A%E6%95%99%E5%AD%B8-(for-php)

以下原文轉載
--------------------------------------------------------------------------

CKEditor 之前的名稱為 FCKEditor,CKEditor是一款 Open Source的所見即所得編輯,透過此編輯器就可輕鬆撰寫文章,並且還可以加粗體變換字體顏色超連結....與圖片上傳等功能,
即便完全不懂任何的HTML語法,也可編輯出一個漂亮的文章頁面出來,並且邊製作還會邊顯示結果,這是個相當方便的功能。

最近因為案子的關系所以使用了CKEditor這個線上編輯的元件,為了怕忘記所以我將設定的方法放上來。

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

 

下載完畢後,將二個元件放在同一目錄

 

01.JPG 

開啟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檔案

 

後記:

我曾在網路上看到須要在php網頁裏的</body>前加上

 

<?php
include_once "ckeditor/ckeditor.php";
$CKEditor = new CKEditor();
$CKEditor->basePath = 'ckeditor/';
$CKEditor->replace("editor1");
?>

可是我加上去之後,按上傳圖片完成後,整個網頁都會當掉,後來
我把上述的程式碼拿掉之後,再試之後就不會讓網頁當掉,而且功
能也都正常。

 

 

 

02.JPG 

開啟ckfinder config.php,找到33行將return false改成return true

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改成return true
}

03.JPG 

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

$baseUrl = '/網站目錄/存放檔案的目錄/'; //上傳目錄

 


04.JPG 

接下來就新增一個PHP的網頁,在<head></head>中間插入

 

<script type="text/javascriptsrc="ckeditor/ckeditor.js"></script>

新增一個form表單,並放入一個textarea的文字框,並且將name與id設一樣,在texttarea的class屬性設定為ckeditor

<textarea name="textfieldid="textfieldclass="ckeditor"></textarea>

05.JPG 

 

接下來就可以預覽一下網頁,那就大功告成了!

06.JPG 

07.JPG 

後記:

我曾在網路上看到說要在php網頁中的</body>前加上

<?php
include_once "ckeditor/ckeditor.php";
$CKEditor = new CKEditor();
$CKEditor->basePath = 'ckeditor/';
$CKEditor->replace("editor1");
?>

可是加上去的話會按上傳圖片後會讓整個網頁當掉,之後我把上述程式拿掉之後就不會當了,而且功能上也沒啥問題。

 

arrow
arrow
    全站熱搜

    yoonow 發表在 痞客邦 留言(0) 人氣()