ckeditor4.8 富文字編輯器的使用與填坑-PHP

ckeditor4是經過驗證的企業級WYSIWYG HTML編輯器，具有廣泛的瀏覽器相容性(包括舊版瀏覽器);同時支援定製化;可訪問性強;支援多種外掛,元件,皮膚等;

進入官網下載自己需要的ckeditor4
https://ckeditor.com/ckeditor-4/download/
我在這裡下載的為自定製版,其中可以選擇簡體中文的語言包,隨後下載

解壓縮後放入專案目錄中:

在index.php檔案中引入對應的js檔案:

在index.php檔案中編輯:

建立完成

開啟ckeditor資料夾,其中有對應的配置檔案config.js,開啟該檔案,將內建的語言更改為簡體中文

config.language = 'zh-cn';

點選圖片按鈕後,初始時是這個樣子:

在預覽中有很多不必要的文字,我們先將其去掉.
在配置檔案 config.js 中,新增以下程式碼,將預覽文字域中的文字清空

config.image_previewText=' ';

這時,你可能會問:現在沒有自定義上傳的按鈕啊,難道只能新增圖片地址才能上傳嗎?
不要慌,這些自然是有的,此時上傳功能人家偷偷的給隱藏起來了.
開啟config.js檔案,為其配置上傳圖片的url

config.filebrowserUploadUrl="http://127.0.0.1/ziming/ckeditor/uploader.php";

這樣,就有了上傳的功能了

光是如此還是遠遠不夠的,還需要編輯上傳檔案的程式碼
我的上傳檔案程式碼如下:

$extensions = array("jpg","bmp","gif","png","jpeg");
$uploadFilename = $_FILES['upload']['name'];
$uploadFilesize = $_FILES['upload']['size'];
if($uploadFilesize  > 1024*2*1000){
echo "<font color=\"red\"size=\"2\">*圖片大小不能超過2M</font>";
exit;
}

$extension = pathInfo($uploadFilename,PATHINFO_EXTENSION);
if(in_array($extension,$extensions)){
$uploadPath ="./uploadfile/";
$uuid = str_replace('.','',uniqid("",TRUE)).".".$extension;
$desname = $uploadPath.$uuid;
$previewname = './uploadfile/'.$uuid;
$tag = move_uploaded_file($_FILES['upload']['tmp_name'],$desname);
$arr = array('uploaded'=>1,'url'=>$previewname);
exit(json_encode($arr));
//$callback = $_REQUEST["CKEditorFuncNum"];
//echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(2,$previewname);</script>";
}else{
echo "<font color=\"red\"size=\"2\">*檔案格式不正確（必須為.jpg/.gif/.bmp/.png檔案）</font>";
}

這不,坑來了,在你上傳時,可能會出現幾種錯誤情況:
1.

上傳圖片的url配置寫錯了,仔細檢查一下吧
2.

我當時在這卡了很久,因為在返回圖片提交的訊息時,沒有按照人家的返回格式.在ckeditor不同版本中,要求返回的資訊是不同的,ckeditor4.8中,要求返回的為json格式,但是,部分版本是放入

echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(2,$previewname);</script>";

中後返回的.我在這裡一直是用的上面的返回資訊,所以一直提示這個錯誤.
最後終於發現了是需要json格式的,

//uploader 為上傳狀態  fileurl為上傳之後的圖片路徑
$arr = array('uploaded'=>1,'fileurl'=>$previewname);
exit(json_encode($arr));

當更改完成之後,上傳成功

上傳完成之後直接跳轉至影像資訊中,確認之後,放入文字域中

如果想直接複製貼上上傳,會出現如下錯誤:

這時檢視錯誤資訊:

傳入的是json格式,後臺獲取錯誤,這時只需在config.js中,剛才配置url的位置中,加上一個 ? ,即可把對應的資料傳輸過去.

config.filebrowserUploadUrl="http://127.0.0.1/ziming/ckeditor/uploader.php?";

再次上傳:

前端程式碼如下:

<textarea name="editor1" id="editor1" rows="10" cols="80">
</textarea>

<button onclick="OnUpload()">提交</button>
<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
    function OnUpload() {
        //獲取資料
  var data = CKEDITOR.instances.editor1.getData();
        console.log(data)
    }
</script>

列印剛才獲取的資料

獲取完成.

至此,ckeditor的使用到此結束.

本作品採用《CC 協議》，轉載必須註明作者和本文連結