近来,博主有一个个人网站想要更新(网站主要是实时资讯类的)。因为是资讯网站,每次在发资讯的时候,文字的样式以及图片都无法进行固定化,而且都不美观,后来想起富文本编辑器来着,所以接下来为大家带来kindeditor这一款富文本编辑器的使用。
简介
点这里:kindeditor的官网地址
按照如下步骤:
下载完压缩包,解压缩到本地。
这里就不对每个包的用途进行解释了,对目录asp asp php 进行删除,剩下的就是我们想要的包。
由于项目中jsp页面的代码过多,不易分析,博主写了个demo,核心代码是一样的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>富文本编辑器</title>
<script charset="utf-8" src="kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
resizeType: 1,
uploadJson : '/wenjiqiwu/upload.do',// 上传图片接口 项目名(此处项目名是wenjiqiwu)+上传图片的路径
filePostName: 'imgFile',// name属性默认值
allowPreviewEmoticons: false
});
});
function save() {
//取得HTML内容?
//同步数据后可以直接取得textarea的value?
editor.sync();
html = document.getElementById('addeditor_id').value; //原生API
$("#schtmlnr").val(html); //把KindEditor产生的html代码放到schtmlnr里面,用于提交
return true;
}
</script>
</head>
<body>
<form action="addNews.do" method="post" onsubmit="return save();">
<div>
<textarea id="addeditor_id" name="content" style="width:100%;height:600px;border: 0 none;visibility:hidden;"></textarea>
<textarea rows="" cols="" name="ncontent" id="schtmlnr" style="display:none;"></textarea>
</div>
<input type="submit" value="提交" " />
</form>
</body>
</html>
这里面强调一点,富文本编辑器的图片上传以及多图片上传的js代码片段:
还有一点就是,富文本编辑器在表单提交的时候,文本域中获得的值总是为null,后来博主是利用隐藏域解决了。
图片上传我是用的阿里云的OSS,大家也可以将图片存在本地,附上图片上传的代码:
@RequestMapping("/upload")
public @ResponseBody KindEditorResult uploadImg(
@RequestParam("imgFile") MultipartFile imgFile) {
KindEditorResult result = new KindEditorResult();
try {
CommonsMultipartFile cf= (CommonsMultipartFile)imgFile;
DiskFileItem fi = (DiskFileItem)cf.getFileItem();
File file = fi.getStoreLocation();
String Objectkey = "www/news/"+System.currentTimeMillis()+"_"+imgFile.getOriginalFilename();
String URL=OSSUtil.uploadFile(Objectkey, file);
result.setError(0);
result.setUrl(URL);
} catch (Exception e) {
result.setError(1);
result.setMessage("上传图片出错!");
}
return result;
}
图片上传返回实体:
public class KindEditorResult {
private Integer error;// 0成功 1失败
private String url;// 上传成功时路径
private String message;// 上传失败时信息
public Integer getError() {
return error;
}
public void setError(Integer error) {
this.error = error;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
}
这样就基本介绍完如何在jsp页面使用kindeditor了,喜欢的朋友可以点击一波关注,谢谢大家。最后附上自己的个人网站:点击这里
更多推荐
在jsp页面添加富文本编辑器kindeditor
发布评论