富文本編輯器 KindEditor
富文本編輯器，Rich Text Editor , 簡稱 RTE , 它提供類似於 Microsoft Word 的編輯功能。
常用的富文本編輯器：
KindEditor http://kindeditor.net/
UEditor http://ueditor.baidu.com/website/
CKEditor http://ckeditor.com/
基本使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="themes/default/default.css" />
<script charset="utf-8" src="kindeditor-all.js"></script>
<script charset="utf-8" src="lang/zh-CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true,
items : [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
});
});
</script>
<head/>
<body>
<form>
<textarea name="content" style="width:800px;height:400px;">KindEditor</textarea>
</form>
</body>
</html>
工具欄中圖片上傳的表單 name 值為 imgFile
<input type="file" class="ke-upload-file" name="imgFile" tabindex="-1">
圖片上傳前后端接口，必須返回這樣格式的 json 字符串，才會回調 afterUpload 屬性指定的回調函數。
{"error":0, "url": "http://www.baidu.com/tupian.jpg"}
{"error":1, "message": "文件上傳失敗"}
upload_json.jsp 文件中的內容
obj.put("error", 0);
obj.put("url", saveUrl + newFileName);
obj.put("error", 1);
obj.put("message", message);
//前台使用 afterUpload 指定文件上傳回調函數，可以接收3個參數，url data name 。
afterUpload: function() {
// alert(url);
// alert(data);
// alert(name);
}
圖片上傳
請求參數 服務器響應數據 回調函數
- 請求參數
imgFile: 文件form名稱
dir: 上傳類型，分別為image、flash、media、file
POST參數
imgFile: form 文件表單項的 name 屬性值
dir: 上傳類型，分別為image、flash、media、file
返回格式(JSON)
原文：https://blog.csdn.net/a623982022/article/details/78883485
實例
http://localhost:9102/upload2.do?dir=image
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryAlzILycWoCrusx1z
- 服務器響應數據
//成功時
{
"error" : 0,
"url" : "http://www.example.com/path/to/file.ext"
}
//失敗時
{
"error" : 1,
"message" : "錯誤信息"
}
-
回調函數
url表示上傳成功時返回的文件url地址data服務器響應的json對象name上傳類型，如：圖片上傳，多圖片上傳，文件上傳。取值： image multiimage insertfile
注意：參數是按照位置給值的，如果回調只有一個參數，那么就表示 url , 如果回調有2個參數，那么依次表示 (url, data) , 如果回調有3個參數，那么依次表示 (url, data, name)
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true,
items:['fontname', 'fontsize', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'removeformat', 'justifyleft', 'justifycenter', 'justifyright',
'insertorderedlist', 'insertunorderedlist', 'emoticons', 'image', 'multiimage', 'insertfile'
],
uploadJson: "../upload2.do",
allowImageRemote: false,
afterUpload: function(url, data, name) {
alert(url);
alert(data);
alert(name);//如果是單張圖片，則 name="image"
}
});
});
單圖片上傳交互數據
前台的請求
http://localhost:9102/upload2.do?dir=image
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryAlzILycWoCrusx1z
后台的響應
{"error":0,"url":"http://192.168.25.133/group1/M00/00/00/wKgZhV0gazKAa_6GAAAItlg8JxI168.png"}
多圖片上傳
通過多次單圖片上傳實現，afterUpload 上傳回調函數被調用多次。
單圖片上傳返回結果
文件上傳后台程序
@RestController
public class UploadController {
@Value("${FILE_SERVER_URL}")
private String FILE_SERVER_URL;
@RequestMapping("/upload")
public Result upload(@RequestParam("imgFile") MultipartFile file){
try {
FastDFSClient fastDFSClient = new FastDFSClient("classpath:config/fdfs_client.conf");
//獲取擴展名
String originalFilename = file.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf('.') + 1);
String fileId = fastDFSClient.uploadFile(file.getBytes(), extName);
String url = FILE_SERVER_URL + fileId;
return new Result(true, url);
} catch (Exception e) {
e.printStackTrace();
}
return new Result(false, "文件上傳失敗");
}
@RequestMapping("/upload2")
public Map upload2(@RequestParam("imgFile") MultipartFile file){
try {
FastDFSClient fastDFSClient = new FastDFSClient("classpath:config/fdfs_client.conf");
//獲取擴展名
String originalFilename = file.getOriginalFilename();
String extName = originalFilename.substring(originalFilename.lastIndexOf('.') + 1);
String fileId = fastDFSClient.uploadFile(file.getBytes(), extName);
String url = FILE_SERVER_URL + fileId;
Map map = new HashMap<>();
map.put("error", 0);
map.put("url", url);
return map;
} catch (Exception e) {
e.printStackTrace();
}
Map map = new HashMap<>();
map.put("error", 1);
map.put("message", "文件上傳失敗");
return map;
}
}
文件上傳
自動回顯文件名 超鏈接的文本顯示為原始文件名
配置 items 中的 insertfile
-
上傳文件后，在 kindeditor 窗口中顯示超鏈接的文本是原始文件名，而不是超鏈接的 url 地址。
方案：
KindEditor 4.1.10 (2013-11-23) 文件上傳對話框中，可以通過文件說明，來指定超鏈接的文本。但是不會自動回顯原來的上傳文件名。
-
上傳文件對話框中的文件說明如何自動回顯文件名。
<!-- 上傳文件對話框中，文件說明文本框 name 屬性的值為 title -->
<input type="text" id="keTitle" class="ke-input-text" name="title" value="" style="width:160px;">
/*
insertfile.js 中文件上傳的內置上傳回調函數，如果沒有出錯，設置 url 輸入框的值，然后調用用戶定義的上傳回調函數。
*/
afterUpload : function(data) {
dialog.hideLoading();
if (data.error === 0) {
var url = data.url;
if (formatUploadUrl) {
url = K.formatUrl(url, 'absolute');
}
urlBox.val(url);
if (self.afterUpload) {
self.afterUpload.call(self, url, data, name);
}
alert(self.lang('uploadSuccess'));
} else {
alert(data.message);
}
}
方案：
1. 修改服務器端程序，將原文件名添加到返回數據中。
Map map = new HashMap<>();
map.put("error", 0);
map.put("url", url);
map.put("filename", originalFilename);//將原文件名添加到返回數據中
return map;
- 文件上傳回調函數中，設置文件說明表單項的值為原文件名。
方式一：在自定義文件上傳回調函數中設置文件說明表單項的值為原文件名
分析發現，文件上傳對話框中的文件說明表單項的 id 值為 keTitle，在自定義上傳回調函數中獲取文件說明元素，並設置它的值為原文件名。
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true,
items:[image','multiimage', 'insertfile'],
uploadJson: "../upload2.do",
allowImageRemote: false,
allowFileUpload: true,
//自定義上傳回調函數，如果是上傳文件，則設置文件說明為原文件名，原文件名的數據由服務器返回。
afterUpload: function(url, data, name) {
if(name === 'insertfile'){
$("#keTitle").val(data.filename);
}
console.log(url);
console.log(data);
console.log(name);
}
);
});
成功自動回顯文件名
方式二 修改 insertfile.js 文件，在插件的內置上傳回調函數中，設置文件說明表單項的值。
// 修改 insertfile.js 文件， kindeditor\kindeditor-4.1.10\plugins\insertfile\insertfile.js
var urlBox = K('[name="url"]', div),
viewServerBtn = K('[name="viewServer"]', div),
titleBox = K('[name="title"]', div);//文件說明表單項元素
if (allowFileUpload) {
var uploadbutton = K.uploadbutton({
button : K('.ke-upload-button', div)[0],
fieldName : filePostName,
url : K.addParam(uploadJson, 'dir=file'),
extraParams : extraParams,
afterUpload : function(data) {
dialog.hideLoading();
if (data.error === 0) {
var url = data.url;
if (formatUploadUrl) {
url = K.formatUrl(url, 'absolute');
}
urlBox.val(url);
titleBox.val(data.filename);//設置文件說明表單項元素的值為原文件名，原文件名由服務器端返回。
if (self.afterUpload) {
self.afterUpload.call(self, url, data, name);
}
alert(self.lang('uploadSuccess'));
} else {
alert(data.message);
}
},
afterError : function(html) {
dialog.hideLoading();
self.errorDialog(html);
}
});
成功自動回顯原文件名
