php中ckeditor的配置方法

時間 2019-11-10

標籤 php ckeditor 配置方法欄目 PHP 简体版

原文原文鏈接

ckeditor 編輯器php正確配置方法javascript

1. 下載安裝 CKEditor:php

http://ckeditor.com/html

解壓下載到的CKEditor放到網站的路徑中便可java

2. 下載安裝 CKFinder:數據庫

http://ckfinder.com/download瀏覽器

解壓下載到的CKFinder放到與CKEditor同一目錄中便可服務器

3. 在網頁中使用 CKEditor 和 CKFinder:編輯器

CKEditor 實際是替換一個 textarea 標籤，因此把textarea放到一個form中，當提交到php服務器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得編輯好的數據。注意，由於 CKEditor 要替換 textarea，因此相應的javascript 代碼"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的後面。函數

最簡單的方法，直接新建一個test.html文件（和ckeditor、ckfinder處於同一級目錄）使用下面的例子修改一下便可。在瀏覽器裏瀏覽test.html就能夠在網頁中看到 CKEditor 了，興奮吧。post

<html>

<head>

<title>CKEditor</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

</head>

<body>

<textarea name="editor1">CKEditor Demo</textarea>

</form>

</body>

// 啓用 CKEitor 的上傳功能，使用了 CKFinder 插件

CKEDITOR.replace( 'editor1', {

filebrowserBrowseUrl : 'ckfinder/ckfinder.html',

filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?Type=Images',

filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?Type=Flash',

filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',

filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'

});

</script>

</html>

4. 配置CKFinder進行上傳圖片，Flash等。

到這裏，點擊 "Image" 按鈕，在彈出的窗口中的 "Upload" 標籤中已經看到上傳按鈕了，可是在上傳文件時失敗。由於CKFinder尚未配置好。須要建立上傳文件的目錄和修改 ckfinder/config.php 裏的三個地方:

a. 建立保存上傳文件的目錄，如upload

（把upload文件夾也放在和ckeditor、ckfinder處於同一級目錄，三個目錄都位於項目目錄下）

其路徑爲 /upload/

[For Linux: 把其權限設置爲php server可讀寫，最簡單的是 chmod 777 upload 這樣php server纔有權限往裏面保存文件.]

b. 找到配置文件（ckfinder/config.php）第32行，把 function CheckAuthentication() { return false; }

修改爲 function CheckAuthentication() { return true; }

c. 找到第63行，把 $baseUrl 的值改爲保存上傳文件存目錄的URL，

如 $baseUrl = '/項目名/upload/';（這裏的地址要從項目目錄開始的絕對路徑，肯定上傳目錄已經存在）

d. 找到第82行，刪除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 爲上傳文件目錄的絕對路徑，（不能刪除，不然不能上傳）（本地測試的時候要從磁盤的跟目錄下開始，即C:/或者D:/的直接目錄）

如$baseDir = '/Apache2/htdocs/ck/upload/'; （Apache2是D:/盤下的直接目錄）

這是由於resolveUrl($baseUrl)函數不能正常工做。

至此，能夠使用 CKEditor 和 CKFinder 上傳文件了。

對上面這個小例子中服務器端的b.php代碼：

<?php

header("Content-Type:text/html; charset=utf-8");

$str = $_POST['editor1'];

echo $str;

能夠看到，在點擊submit按鈕後，服務器端收到了CKEditor中的內容，並使用echo輸出，生成一個與CKEditor裏面編輯的徹底同樣的內容。在服務器端能夠把收到的內容保存到數據庫中。而後再讀出在相應的頁面顯示出來。

來源：http://blog.csdn.net/shenx99/article/details/6981379

示例一:

(目錄test下面包括：ckeditor目錄文件夾 + test.html + a.php)

test.html>>>

<html>

<head>

<title>CKEditor</title>

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

</head>

<body>

<textarea style="width:100px;height:100px" name="editor" id="editor1">CKEditor Demo</textarea>

</form>

</body>

//下面的'editor'就是上面的textarea的名稱; 用CKEitor提供的方法直接獲取textarea提交的內容

CKEDITOR.replace('editor1');
var f = document.myForm;
f.onsubmit=function(){
alert(CKEDITOR.instances.editor1.getData());
}

</script>

</html>

a.php》》》

<?php

header("Content-Type:text/html; charset=utf-8");

$str = $_POST['editor']; //editor是提交過來頁面的textarea的name名

echo $str;

示例：與上面相同的文件，去掉alert代碼；並分別從本地和互聯上copy一些帶有文件和圖片的內容放到test.html中進行提交，發現：

本地的圖片img標籤：<img src="file:///c:/x/y.gif />

互聯上copy的圖片img標籤：<img alt="" src="http://www.baidu.net/uploads/img/201007/18130009_BkZR.png" style="margin:0px" />

處理中文命名圖片亂碼=》

更改下面文件中的代碼：

http://localhost/home/admin/ckfinder/core/connector/php/php5/CommandHandler/FileUpload.php

個性化定義面板功能和屬性：

1）直接在使用的地方用js調用；

2）或在http://localhost/home/admin/ckeditor/config.js 這個配置文件設置；

參考文檔：http://docs.ckeditor.com/source/config.html#CKEDITOR-config

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。