富文字編輯器CKEditor配置及使用
阿新 • • 發佈：2019-01-09
注：使用CKEditor版本為js版本的CKEditor 4.8.0，所有配置均參考自CKEditor官方API：https://docs.ckeditor.com/，以及實踐經驗
一、快速使用
- CKEditor官網下載js外掛
進入官網https://ckeditor.com/ckeditor-4/download/點選Release notes選擇4.8.0版本點選Download.Zip下載
備註：目前最新版本4.9.0有bug，所以用4.8.0版本
將下載的zip包解壓後放入webapp下：
- 引入CKEditor的js檔案
<script src="ckeditor/ckeditor.js" - 頁面中使用CKEditor
<!--在需要使用編輯器的地方插入textarea標籤 -->
描述：<textarea name="description" id="description"/></textarea>
<!--將相應的控制元件替換成編輯器程式碼 -->
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'description');
};
具體示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'description' 引入後效果如下：
- 後臺獲取編輯器的值
後臺通過獲取textarea的值獲取編輯器的值，springMVC取值如下：
@RequestMapping(value = "/add", method = RequestMethod.POST)
public Result add(Job job){......}
二、圖片上傳
清空影象預覽框中的文字
ckeditor資料夾下的config.js中新增：
config.image_previewText=' ';新增後效果如下：
- 配置上傳圖片請求地址
ckeditor資料夾下的config.js中新增：
config.filebrowserUploadUrl="file/uploadImage";- 上傳照片預覽
圖片上傳成功，在目錄下也可以看到圖片，至此圖片上傳成功。但是如何將圖片發到編輯器中呢？點“確定”按鈕會有以下提示。
到這裡，要在controller中返回一段JS指令碼：
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");
out.println("</script>"); 有了這段程式碼，圖片上傳成功後，根據這裡的
“upload/” + filename
相對地址，就可以使用這個圖片，直接轉到“影象”頁面。
點選確定後編輯器如下：
- 上傳的圖片重新顯示到頁面
直接將值寫在標籤中：
<form method="post" action="job/add">
招聘崗位：<input type="text" name="position" id="position" value='${job.position}'/>
招聘人數：<input type="text" name="quantity" id="quantity" value='${job.quantity}' />
學歷要求：<input type="text" name="education" id="education" value='${job.education}'/>
薪資：<input type="text" name="salary" id="salary" value='${job.salary}'/>
聯絡人：<input type="text" name="contact" id="contact" value='${job.contact}'/>
聯絡電話：<input type="text" name="telephone" id="telephone" value='${job.telephone}'/>
描述：<textarea name="description" id="description"/>${job.description}</textarea>
<input type="submit"/>
</form>- 後臺上傳圖片程式碼
/**
* 富文字編輯器圖片上傳
* @param file
* @return
*/
@RequestMapping(value = "/uploadImage", method = RequestMethod.POST)
public void uploadImage(@RequestParam("upload")MultipartFile[] file)
{
response.setCharacterEncoding("UTF-8");
PrintWriter out=null;
// CKEditor提交的很重要的一個引數 ,回撥函式的序號
String callback = this.request.getParameter("CKEditorFuncNum");
try {
out = response.getWriter();
} catch (IOException e1) {
logger.error("response.getWriter()異常="+e1);
e1.printStackTrace();
}
FileInfo fileInfo = null;
//上傳目錄地址
String uploadDir = this.session.getServletContext().getRealPath("/") + "upload/";
//如果目錄不存在，自動建立資料夾
File dir = new File(uploadDir);
if (!dir.exists())
{
dir.mkdir();
}
try
{
for (int i = 0; i < file.length; i++)
{
if (null != file[i])
{
fileInfo=executeUpload(uploadDir, file[i]);
fileInfo.setId(IdGen.uuid());
fileInfo.setCreateDt(DateUtil.getNowDate());
fileInfo.setCreateBy(this.getLoginUser().getId());
fileInfo.setUpdateBy(this.getLoginUser().getId());
fileInfo.setUpdateDt(this.getLoginUser().getId());
fileService.add(fileInfo);
// 返回"影象"選項卡並顯示圖片 request.getContextPath()為web專案名
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
+ ",'" + this.request.getContextPath() + "/upload/" + fileInfo.getRename() + "','')");
out.println("</script>");
}
}
}
catch (IOException e)
{
out.println("<script type=\"text/javascript\">");
out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",''," + "'檔案上傳失敗！');");
out.println("</script>");
}
}三、難點總結
- 上傳圖片傳到後臺的引數CKEditorFuncNum為空
// CKEditor提交的很重要的一個引數 ,回撥函式的序號
String callback = this.request.getParameter("CKEditorFuncNum");將CKEditor版本由CKEditor 4.9.0換成CKEditor 4.8.0解決問題
- 上傳圖片傳到後臺的引數MultipartFile[]為空
新增引數註解@RequestParam(“upload”)後解決，程式碼如下：
public void uploadImage(@RequestParam("upload")MultipartFile[] file)- 儲存到資料庫的編輯器的內容中的圖片無法在頁面顯示
編輯器中的圖片是上傳到了應用伺服器的/upload目錄下，編輯器中關於圖片的連結資訊儲存到了資料庫中DESCRIPTION欄位中，如下：
在頁面上直接將值寫在標籤中：
<form method="post" action="job/add">
招聘崗位：<input type="text" name="position" id="position" value='${job.position}'/>
招聘人數：<input type="text" name="quantity" id="quantity" value='${job.quantity}' />
學歷要求：<input type="text" name="education" id="education" value='${job.education}'/>
薪資：<input type="text" name="salary" id="salary" value='${job.salary}'/>
聯絡人：<input type="text" name="contact" id="contact" value='${job.contact}'/>
聯絡電話：<input type="text" name="telephone" id="telephone" value='${job.telephone}'/>
描述：<textarea name="description" id="description"/>${job.description}</textarea>
<input type="submit"/>
</form>