CKEditor 是新一代的 FCKeditor,是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。
本文使用的github中名为es-ckeditor包含大量功能,包含数学运算...谁用到了更多好用的功能,记得艾特我,我也不会。
效果图:
如何使用:
1.github搜索es-ckeditor下载,这是有大牛搞好的包含一批插件的ckeditor;
2.创建页面引入ckeditor
<!DOCTYPE html>
<html lang="en">
<head>
<!--一定要先引入一个能用的jquery-->
<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
<script src="../ckeditor/ckeditor.js"></script>
<style>
.webuploader-element-invisible{display: none;}
</style>
</head>
<body>
<div style="width: 700px;height: 200px;">
<div id="editor"></div>
</div>
<script>
CKEDITOR.replace( 'editor',
{
language : 'zh-cn',
toolbar: "Detail"//这个配置是config.js中配置好的展现方式的一种
});
</script>
</body>
3.ckeditor根目录下的如下函数中加入上传的路径配置:
CKEDITOR.editorConfig = function( config ) {
...
...
...
//自定义:开启工具栏“图像”中文件上传功能,后面的url为待会要上传action要指向的的action或servlet
config.filebrowserImageUploadUrl= "/ajax/ckpicupload.htm";
}
4.java代码上传图片,返回链接:
@Controller
@Scope("prototype")
@RequestMapping("/ajax/")
public class AjaxController {
@RequestMapping("ckpicupload")
public String uploadfile(HttpServletRequest request, HttpServletResponse response) throws Exception{
String field="file";
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
//getFiles(a String specifying the parameter name of the multipart file),field是上传组件的name
List<MultipartFile> filelist=multipartRequest.getFiles(field);
String picUrl="";
for(MultipartFile multipartFile:filelist){
//***此处执行上传到服务器,我这儿就是上传到本地此项目在Tomcat下的根目录中***
//文件的原始名称
String originalFilename=multipartFile.getOriginalFilename();
String newFileName=null;
if (multipartFile!=null&&originalFilename!=null&&originalFilename.length()>0){
newFileName= UUID.randomUUID()+originalFilename;
//存储图片的物理路径
String pic_path = request.getSession().getServletContext().getRealPath("/upload");
//如果文件夹不存在则创建
File file=new File(pic_path);
if(!file.exists()){
System.out.println("file not exists");
file.mkdir();
}
/**
* 获取新文件的File实例,通过spring的org.springframework.web.multipartInterface MultipartFile
* 下的transferTo方法,这个可以移动文件的文件系统,复制文件系统中的文件或内存内容保存到目标文件.
* 如果目标文件已经存在,它将被删除。
*/
picUrl=pic_path+"\\"+newFileName;
//新文件路径实例
File targetFile = new File(pic_path, newFileName);
//内存数据读入磁盘(将接收到的文件传输到给定的目标文件)
multipartFile.transferTo(targetFile);
}
}
JSONObject json = new JSONObject();
//此处开发中返回实际生成的地址
json.put("url","http://chuantu.xyz/t6/741/1614656002x1700340449.png");
response.getWriter().write(json.toString());
return null;
}
}