富文本編輯器CKeditor的配置和圖片上傳，看完不後悔

時間 2019-12-10

標籤文本編輯器 ckeditor 配置圖片上傳看完後悔简体版

原文原文鏈接

CKeditor是一款富文本編輯器，本文將用極爲簡單的方式介紹一下它的使用和困擾你們好久的圖片上傳問題，要有耐心。javascript

第一步：如何使用html

1.官網下載https://ckeditor.com/ckeditor...，分別是簡易版、標準版、全面版、自定義四個選項，下載哪一個根據你的訴求來。java

2.下載成功後---->解壓獲得一個ckeditor文件夾----->把ckeditor文件夾上傳到服務器上（或本地的靜態服務上）------>本地新建一個demo.htm以下json

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="editor1" id="editor1" class="ckeditor" rows="10" cols="80"></textarea>
<script src="http://本身的服務器地址/ckeditor/ckeditor.js"></script>
</body>
</html>

3.運行demo.html就能看見編輯器了獲取編輯器數據用 var data = CKEDITOR.instances.editor1.getData()服務器

第二步：如何經過編輯器上傳圖片到服務器編輯器

1.找到ckeditor/config.js，原來亂七八糟的全刪了，修改以下ui

CKEDITOR.editorConfig = function( config )
{
config.filebrowserImageUploadUrl = '/void/imgupload/ckeditorUpload?type=image';
};

2.解釋一下，這個'/void/imgupload/ckeditorUpload'是本身定義的本地接收圖片的接口，你須要寫接收保存圖片的邏輯url

3.重點！！這個接口接受保存完圖片怎麼反饋呢？？答案是：新版本的ckeditor要返回json格式以下：code

{
"uploaded": 1,   //寫死的
"fileName": filename,  //圖片名
"url": url  //上傳服務器的圖片的url
}

舊版本要返回js代碼！！！以下：htm

callback = request.args.get("CKEditorFuncNum")
resData = "<script type=\"text/javascript\">"
resData += "window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + url + "',''" + ")" 
resData += "</script>"
return resData

解釋：url是上傳服務器的圖片的url callback是要接收get參數，參數名是「CKEditorFuncNum」，callback必定不能缺