web/easyui/ssm框架引用KindEditor富文字編輯器
阿新 • • 發佈：2018-11-14
web/easyui/ssm框架引用KindEditor富文字編輯器
KindEditor 是一套開源的線上HTML編輯器，主要用於讓使用者在網站上獲得所見即所得編輯效果，開發人員可以用 KindEditor 把傳統的多行文字輸入框(textarea)替換為視覺化的富文字輸入框。
KindEditor 使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程式整合，比較適合在 CMS、商城、論壇、部落格、Wiki、電子郵件等網際網路應用上使用。
主要特點：
- 快速：體積小，載入速度快
- 開源：開放原始碼，高水平，高品質
- 底層：內建自定義 DOM 類庫，精確操作 DOM
- 擴充套件：基於外掛的設計，所有功能都是外掛，可根據需求增減功能
- 風格：修改編輯器風格非常容易，只需修改一個 CSS 檔案
- 相容：支援大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera
為什麼使用KindEditor而不是經常提到的ueditor百度編輯器？
因為個人認為體積小，載入速度快，最主要的是，一般來說引用文字編輯器都只是需要文字編輯功能，其他雜七雜八的功能實際上太多了反而不好看。
其次就是遮罩層問題，初始化和物件銷燬的問題，圖片上傳配置，官方jar包也有問題(貌似官方在mavne倉庫沒有jar包)。對於頁面功能來說也沒有特別大的改動，但是真正使用起來還是覺得KindEditor更加簡便一些(這是個人觀點)，於是個人喜好使用KindEditor。
廢話不多說，趕緊看實戰。
2.web專案中整合KindEditor
-
下載編輯器
下載 KindEditor 最新版本，下載之後開啟 examples/index.html 就可以看到演示。
下載頁面: 下載地址 -
部署編輯器
解壓 kindeditor-x.x.x.zip 檔案，將所有檔案上傳到web程式目錄裡。
你可以根據開發需求，而刪除以下目錄後上傳到伺服器。（就是剔除不要的資料夾。）
asp - ASP程
asp.net - ASP.NET程式
php - PHP程式
jsp - JSP程式
examples - 演示檔案
比如我的：
- 修改HTML頁面
3.1 引用js檔案：
3.2 在需要顯示編輯器的位置新增textarea輸入框。
<textarea id="editor" name="newscontent" placeholder="請輸入文章內容..." style="width: 700px; height: 500px; ">
</textarea>
如圖：
注意:
- id在當前頁面必須是唯一的值。
- 在textarea裡設定HTML內容即可實現編輯，在這裡需要注意的是，如果從伺服器端程式(ASP、PHP、ASP.NET等)直接顯示內容，則必須轉換HTML特殊字元(>,<,&,”)。具體請參考各語言目錄下面的demo.xxx程式，目前支援ASP、ASP.NET、PHP、JSP。
- 在有些瀏覽器上不設寬度和高度可能顯示有問題，所以最好設一下寬度和高度。寬度和高度可用inline樣式設定，也可用 編輯器初始化引數 設定。
3.3 在該HTML頁面新增以下指令碼。
//KindEditor編輯器建立
KindEditor.ready(function (K) {
var editor;
/* 這個id要和textarea的id一致*/
window.editor = K.create('#editor',{
//指定的檔案上傳input的的屬性名
filePostName: "uploadFile",
//批量/上傳圖片的控制
uploadJson: 'kindeditor/upload',
resizeType: 1, //滾動條
filterMode:false, //關閉過濾功能
allowPreviewEmoticons: true,
allowImageUpload: true,
fullscreenMode:false, //是否全屏
allowMediaUpload:false, //true時顯示視音訊上傳按鈕。預設值: true
allowFlashUpload:false, //true時顯示Flash上傳按鈕;預設值: true
//編輯器寬度
width: '700px',
//加入以下行，後臺就可以得到值
afterChange: function(){ //編輯器內容發生變化後，將編輯器的內容設定到原來的textarea控制元件裡
this.sync(); },
afterBlur : function(){ //編輯器聚焦後，將編輯器的內容設定到原來的textarea控制元件裡
this.sync(); }
});
})
如圖：
- 更多設定引數：引數設定
關於編輯器當中的圖片上傳接收後臺：
KindEditorUpload.java
原始碼：
package com.hangtu.controller;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.alibaba.fastjson.JSONObject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.*;
/**
*
*@class_name：KindEditorUpload
*@comments: 設定kindEditor上傳圖片路徑
*@param:圖片
*@return: url路徑
*@author:鄒濤/Zoutao
*@createtime:2018年9月25日
*/
@SuppressWarnings("serial")
@WebServlet("/kindeditor/upload")
public class KindEditorUpload extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//設定Response響應的編碼
resp.setContentType("text/html; charset=UTF-8");
//獲取一個Response的Write物件
PrintWriter writer = resp.getWriter();
//檔案儲存目錄路徑
String savePath = req.getServletContext().getRealPath("/") + "attached/";
System.out.println(savePath);
//檔案儲存目錄URL
String saveUrl = req.getContextPath() + "/attached/";
System.out.print(saveUrl);
//定義允許上傳的副檔名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");
extMap.put("flash", "swf,flv");
extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
//最大檔案大小
long maxSize = 1000000;
//判斷是否是一個檔案
if (!ServletFileUpload.isMultipartContent(req)) {
writer.println(getError("請選擇檔案。"));
return;
}
//檢查目錄
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory()) {
writer.println(getError("上傳目錄不存在。"));
return;
}
//檢查目錄寫許可權
if (!uploadDir.canWrite()) {
writer.println(getError("上傳目錄沒有寫許可權。"));
return;
}
String dirName = req.getParameter("dir");
if (dirName == null) {
dirName = "image";
}
if (!extMap.containsKey(dirName)) {
writer.println(getError("目錄名不正確。"));
return;
}
//建立資料夾
savePath += dirName + "/";
saveUrl += dirName + "/";
File saveDirFile = new File(savePath);
if (!saveDirFile.exists()) {
saveDirFile.mkdirs();
}
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
String ymd = sdf.format(new Date());
savePath += ymd + "/";
saveUrl += ymd + "/";
File dirFile = new File(savePath);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
List items = null;
try {
items = upload.parseRequest(req);
} catch (FileUploadException e) {
e.printStackTrace();
}
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
String fileName = item.getName();
long fileSize = item.getSize();
if (!item.isFormField()) {
//檢查檔案大小
if (item.getSize() > maxSize) {
writer.println(getError("上傳檔案大小超過限制。"));
return;
}
//檢查副檔名
String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) {
writer.println(getError("上傳副檔名是不允許的副檔名。\n只允許" + extMap.get(dirName) + "格式。"));
return;
}
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt;
try {
File uploadedFile = new File(savePath, newFileName);
item.write(uploadedFile);
} catch (Exception e) {
writer.println(getError("上傳檔案失敗。"));
return;
}
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
writer.println(obj.toJSONString());
}
}
//將writer物件中的內容輸出
writer.flush();
//關閉writer物件
writer.close();
}
//私有方法，用於響應錯誤資訊。
private String getError(String message) {
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);
return obj.toJSONString();
}
}
3.4. 獲取HTML資料
注意，新增一行這個 就可以得到資料
afterBlur: function () { this.sync(); },
當失去焦點時執行 this.sync();,不加就獲取不了文字框的值。
必須加有這個屬性，這樣後臺才能取到編輯器裡面寫的內容。
如圖：
- KindEditor的視覺化操作在新建立的iframe上執行，程式碼模式下的textarea框也是新建立的，所以最後提交前需要執行 sync() 將HTML資料設定到原來的textarea。
- KindEditor在預設情況下自動尋找textarea所屬的form元素，找到form後onsubmit事件裡新增sync函式，所以用form方式提交資料，不需要手動執行sync()函式。
- KindEditor預設採用白名單過濾方式，可用 htmlTags 引數定義要保留的標籤和屬性。當然也可以用 filterMode 引數關閉過濾模式，保留所有標籤。
// 關閉過濾模式，保留所有標籤
KindEditor.options.filterMode = false;
KindEditor.ready(function(K)) {
K.create('#editor_id');
}
3.5 後臺接收編輯器的文字值：
String newscontent = request.getParameter("newscontent"); //內容
就是個字串獲取即可，整個編輯器的內容，是封裝在textarea裡面的，也就是直接獲取這個textarea的id就可以拿到編輯器裡面的值。
效果圖：
總結：
- 引用了KindEditor富文字編輯器，可以編輯文字資訊
- 添加了圖片上傳功能在編輯器裡面，可以上傳圖片。
- 後臺可以存入html標籤的編輯器的內容，包括圖片。
3.相關難點
難點一：
關於 this.sync() 函式簡單的說就是同步KindEditor的值到textarea文字域的問題？
KindEditor 從資料庫裡取值樣式不正常的問題？
如圖：
原因：可能是存在自動轉義或者編輯器有過濾html的功能。
解決：實際上有沒有樣式是不影響的編輯器的內容顯示的：
或者是這樣
也就是無論你存那種值都是可以的，如果你想要單獨的只在資料庫中存入文字。那麼就開啟過濾標籤的功能。開啟和關閉的方式在上面 過濾模式的那裡。
難點二：
在編輯文章的時候，KindEditor編輯器中沒有內容？或者是獲取不到內容？或者是編輯器裡面的內容仍然是上一次新增的文章時的資訊等等問題：
如圖：
解決：
- 保證加入了 sync()函式。（參考上面）
- 然後在點選關閉視窗時，呼叫函式，清空值。
就可以解決這個問題。
參考地址：
http://www.cnblogs.com/jimisun/p/9408120.html
http://kindeditor.net/doc.php
https://www.cnblogs.com/libo0125ok/p/8127049.html