kindeditor的使用

最新推荐文章于 2021-05-19 12:44:48 发布

bill_live

最新推荐文章于 2021-05-19 12:44:48 发布

阅读量148

点赞数

原文链接：http://www.cnblogs.com/zxwBj/p/8676376.html

版权

富文本框KindEditor的使用

第一步：我们需要到官网上引用相关的资源包，点击进入官网下载资源包，将整个资源包放在服务器上

第二步：引用资源文件

<link rel="stylesheet"
href="${pageContext.request.contextPath}/kindeditor/themes/default/default.css" />

<script charset="utf-8"
src="${pageContext.request.contextPath}/kindeditor/kindeditor-all-min.js"></script>

<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代码，只需要引入如下代码即可：

//这和我们使用的TextArea没有任何区别，不用写上非常复杂的html代码。是不是很简洁？

第四步：我们需要在JS中初始化控件属性，以上面的为例。我们需要写出如下代码：

注意：这两个标红的可以不要
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火狐不显示上传图片按钮

安装下面这个插件即可以正常显示

转载于:https://www.cnblogs.com/zxwBj/p/8676376.html

bill_live

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
kindeditor的使用

富文本框KindEditor的使用第一步：我们需要到官网上引用相关的资源包，点击进入官网下载资源包，将整个资源包放在服务器上第二步：引用资源文件<link rel="stylesheet" href="${pageContext.request.contextPath}/kindeditor/themes/defau...
复制链接

扫一扫