kindeditor的使用

富文本框KindEditor的使用

第一步：咱們須要到官網上引用相關的資源包，點擊進入官網下載資源包，將整個資源包放在服務器上

第二步：引用資源文件

<!-- 導入css,使用默認樣式 -->
<link rel="stylesheet"
href="${pageContext.request.contextPath}/kindeditor/themes/default/default.css" />
<!-- 導入kindeditor的核心js包 -->
<script charset="utf-8"
src="${pageContext.request.contextPath}/kindeditor/kindeditor-all-min.js"></script>
<!-- 導入kindeditor的語言包-->
<script charset="utf-8"
src="${pageContext.request.contextPath}/kindeditor/lang/zh_CN.js"></script>

如圖所示第一個default.css主要是爲了修改咱們KE的樣式，第二個kindeditor-all-min.js是KE核心功能腳本庫，第三個zh_CN.js是語言漢化的腳本。

第三步：編寫對應html代碼，只須要引入以下代碼便可：

<form id="itemAddForm" class="itemForm" method="post" action="${pageContext.request.contextPath}/add">

<textarea cols="0" rows="5" name="introduction" class="form-control"
id="demo"
style="margin: 0px -0.5px 0px 0px; height: 250px; width: 1200px;">
</textarea>
<input type="submit" value="提交表單">
</form>

//這和咱們使用的TextArea沒有任何區別，不用寫上很是複雜的html代碼。是否是很簡潔？

第四步：咱們須要在JS中初始化控件屬性，以上面的爲例。咱們須要寫出以下代碼：

<script type="text/javascript">
initkindEditor();
//初始化富文本
function initkindEditor() {
KindEditor.ready(function (K) {
var editor = K.create('#demo', {
themeType: "default",//使用默認主題
filePostName : 'imageFile',//文件上傳時的name，<input type="file" name="就這個值">
uploadJson: '${pageContext.request.contextPath}/hello',//後臺處理上傳的地址
resizeType: 1,
pasteType: 2,
syncType: "",
urlType:"domain", //解決上傳本地單個圖片時form表單傳給後臺的內容圖片地址不帶域名和端口號的問題
filterMode: true,
allowPreviewEmoticons: false,
afterCreate: function () {
this.sync();
},
//同步數值至文本框 （爲解決js利用submit方法提交表單時沒法獲取到內容）
afterBlur: function () {
this.sync();
},
afterChange: function () {
//富文本輸入區域的改變事件，通常用來編寫統計字數等判斷，選中的是class的名稱
//K('.word_count1').html("最多20000個字符,已輸入" + this.count() + "個字符");
},
afterUpload:function(url){ //注意：kindetor的多圖片上傳是一個一個圖片依次上傳，沒上傳一個圖片發送一次請求，即本質是依次上傳單個圖片
//上傳圖片後的代碼          //注意：若是是返回上傳失敗的json該回調函數不會執行
//alert(url);                        //注意：上傳成功後這裏返回的是圖片的路徑(單圖片上傳和批量上傳稍有不一樣)
},

注意：這兩個標紅的能夠不要
allowFileManager: false,
allowFlashUpload: false,
allowMediaUpload: false,
allowFileUpload: false
});
});
}
</script>

第五步：上傳的後臺代碼（struts2）

注意：這裏實質不須要使用List<File>，由於kindEditor的多圖片上傳是一個圖片一個圖片的上傳，每要上傳一個發送一個請求

@Namespace("/")
@ParentPackage("json-default")
public class HelloAction extends ActionSupport {
private String introduction;
private List<File> imageFile;// 注意這裏的名字要和<input type="file" name="file" />控件的name名稱一致

// 文件類型集合
private List<String> imageFileContentType;// 控件的name名+ContentType

// 文件名集合
private List<String> imageFileFileName;// 控件的name名+FileName

@Action(value = "hello", results = { @Result(name = "success", type = "json") })
public String test() throws Exception {
HashMap<String, Object> result = new HashMap<>();
try {
System.out.println(imageFile);
System.out.println(imageFileContentType);
System.out.println(imageFileFileName);// 如：SecureCRT.rar
// 參數：web資源路徑 返回值 項目發佈到服務器後的真實磁盤路徑
String filesRealPath = ServletActionContext.getServletContext().getRealPath("/files");
for (int i = 0; i < imageFile.size(); i++) {
// 參數一：文件夾路徑，參數二：文件名，返回file對象
File destFile = new File(filesRealPath, imageFileFileName.get(0));
FileUtils.copyFile(imageFile.get(i), destFile);
// 參數一：原文件對象，參數二：目標文件對象
// 做用，將原文件對象的內容copy到目標文件對象<br>
//注意：這段代碼有些bug，若是服務器的files文件夾下已經有了同名同類型的文件，則上傳會替換以前的內容，因此這裏要給上傳的文件設置一個新的名字，推薦uuid
}
} catch (Exception e) {
result.put("error",1);
result.put("message", "上傳失敗");
ActionContext.getContext().getValueStack().push(result);
return SUCCESS;
}
result.put("error", 0);
String name = imageFileFileName.get(0);
result.put("url", "http://localhost:8080/strutsKin/files/"+name);
ActionContext.getContext().getValueStack().push(result);
return SUCCESS;
}

@Action(value = "add", results = { @Result(name = "success", location="/success.jsp") })
public String add() throws Exception {
System.out.println(introduction);

return SUCCESS;
}
public List<File> getImageFile() {
return imageFile;
}

public void setImageFile(List<File> imageFile) {
this.imageFile = imageFile;
}

public List<String> getImageFileContentType() {
return imageFileContentType;
}

public void setImageFileContentType(List<String> imageFileContentType) {
this.imageFileContentType = imageFileContentType;
}

public List<String> getImageFileFileName() {
return imageFileFileName;
}

public void setImageFileFileName(List<String> imageFileFileName) {
this.imageFileFileName = imageFileFileName;
}
public String getIntroduction() {
return introduction;
}
public void setIntroduction(String introduction) {
this.introduction = introduction;
}

}

備註：

1，採用items屬性定製工具欄按鈕顯示

{
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']
}

2，上傳以後的返回給頁面的響應
官網地址：
http://kindeditor.net/docs/upload.html

返回格式(JSON)
//成功時
{
        "error" : 0,
        "url" : "http://www.example.com/path/to/file.ext"
}
//失敗時
{
        "error" : 1,
        "message" : "錯誤信息"
}

　　

備註：

kindeditor火狐不顯示上傳圖片按鈕

安裝下面這個插件便可以正常顯示