1. HTML標簽與jquery代碼

<textarea id="editor_id" style="width: 200px; height: 200px;"></textarea>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../kindeditor4.1.11/kindeditor-all.js"></script>
<script type="text/javascript" src="../kindeditor/kindeditor4.1.11/lang/zh-CN.js"></script>

<script type="text/javascript">
// 編輯富文本框
KindEditor.ready(function(K) {
var editor = K.create(‘#editor_id‘, {
themeType : "simple",
uploadJson : CONTEXT_PATH + "transportations/describe/upload",
resizeType : 1,
imageTabIndex : 1,
filterMode : true,
allowPreviewEmoticons : false,
allowImageUpload : true,
allowFileManager : true,
afterBlur : function() {
this.sync();
},
afterUpload : function(url) {
//上傳圖片後的代碼
var image = "<img src=‘"+url+"‘/>";
insertHtmlAtCaret(image);
},
items : [ ‘source‘, ‘undo‘, ‘redo‘, ‘plainpaste‘, ‘wordpaste‘, ‘clearhtml‘, ‘quickformat‘, ‘selectall‘, ‘fullscreen‘, ‘fontname‘, ‘fontsize‘, ‘|‘, ‘forecolor‘,
‘hilitecolor‘, ‘bold‘, ‘italic‘, ‘underline‘, ‘hr‘, ‘removeformat‘, ‘|‘, ‘justifyleft‘, ‘justifycenter‘, ‘justifyright‘, ‘insertorderedlist‘,
‘insertunorderedlist‘, ‘|‘, ‘link‘, ‘image‘, ‘unlink‘, ‘baidumap‘, ‘emoticons‘ ]
});
});

// 在光標處添加內容
function insertHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("textarea");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().pasteHTML(html);
}
}
</script>

2. java後臺實現

/**
*
* 富文本框編輯-上傳圖片
*
* @param localUrl
* @return
* @throws IOException
* @throws FileUploadException
*/
@RequestMapping(value = "upload")
public void uploadImg(HttpServletRequest request, HttpServletResponse response)
{
// 設置Response響應的編碼
response.setContentType("text/html; charset=UTF-8");

// 獲取一個Response的Write對象
PrintWriter writer = null;

try
{
writer = response.getWriter();

// 文件保存目錄路徑
String savePath = request.getServletContext().getRealPath("/") + "attached/";

// 文件保存目錄URL
String saveUrl = request.getContextPath() + "/attached/";

// 定義允許上傳的文件擴展名
HashMap<String, String> extMap = new HashMap<String, String>();
extMap.put("image", "gif,jpg,jpeg,png,bmp");

// 最大文件大小
long maxSize = 1000000;

// 判斷是否是一個文件
if (!ServletFileUpload.isMultipartContent(request))
{
writer.println(getError("請選擇文件。"));
return;
}

// 檢查目錄upload, 沒有則創建一個
File uploadDir = new File(savePath);
if (!uploadDir.isDirectory())
{
uploadDir.mkdirs();
}

// 檢查目錄寫權限
if (!uploadDir.canWrite())
{
writer.println(getError("上傳目錄沒有寫權限。"));
return;
}

String dirName = request.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();
}

DefaultMultipartHttpServletRequest servletRequest = (DefaultMultipartHttpServletRequest) request;
Iterator<String> iterator = servletRequest.getFileNames();
while (iterator.hasNext())
{
MultipartFile file = servletRequest.getFile(iterator.next());
String fileName = file.getOriginalFilename();

// 檢查文件大小
if (file.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;
}

// 以時間重新命名文件名
String newFileName = CommonUtils.newFileName(fileName);

File uploadedFile = new File(savePath, newFileName);
file.transferTo(uploadedFile);

JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);

writer.println(obj.toJSONString());
}
}
catch (Exception e)
{
logger.error("上傳文件失敗!" + e.getMessage());
}
finally
{
// 將writer對象中的內容輸出
writer.flush();
// 關閉writer對象
writer.close();
}
}

/**
*
* 上傳圖片-響應錯誤信息
*
* @author 戴飛
* @param message
* @return
*/
private String getError(String message)
{
JSONObject obj = new JSONObject();
obj.put("error", 1);
obj.put("message", message);

return obj.toJSONString();
}

關於KindEditor編輯器，了解更多請參考官網文檔；

KindEditor富文本框編輯器上傳圖片功能實現，基於java項目