springboot集成ckedtior4.9.2富文本编辑器

1.下载ckedtior4.9.2,百度云链接: https://pan.baidu.com/s/1A8E8fqE1u8c8gkp6Zl-L8Q 提取码: 7k1i 

2.导入到项目中,因为我用的是springboot框架所以放到src/main/resources/static下

springboot集成ckedtior4.9.2富文本编辑器_第1张图片

3.前台导入ckedtior4.9.2的js

   
	 

 4.html代码

5.js代码(filebrowserImageUploadUrl :"upload?"这个地方有个问号,代表可以粘贴图片上传到服务器)

//初始换编辑器
var editor = CKEDITOR.replace('editor', { 
	filebrowserImageUploadUrl :"upload?",
	removePlugins:'elementspath,resize',
	codeSnippet_theme: 'zenburn',
	height:'480'
});

到这编辑器基本可以使用了

6.配置config.js

/*将编辑器的语言设置为中文*/
    config.language = 'zh-cn';
    /*去掉图片预览框的文字*/
    config.image_previewText = ' ';
    /*开启工具栏“图像”中文件上传功能,后面的url为图片上传要指向的的action或servlet*/
    config.filebrowserImageUploadUrl= "upload";

7.后台代码

/** 上传图片方法
     * @param request
     * @param description
     * @param file
     * @return
     * @throws Exception
     */
    @RequestMapping("/upload")
    @ResponseBody
	public String uploadEditorImage(HttpServletResponse response, HttpServletRequest request,@RequestParam("upload")MultipartFile file) {
    	JSONObject result = new JSONObject();
    	SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
        String res = sdf.format(new Date());
        //服务器上使用
       // String rootPath =request.getServletContext().getRealPath("/resource/uploads/");//target的目录
        //本地使用
        String rootPath ="E:\\bolg";
        //原始名称
        String originalFilename = file.getOriginalFilename();
        //新的文件名称
        String newFileName = res+originalFilename.substring(originalFilename.lastIndexOf("."));
        //新文件
        File newFile = new File(rootPath+ File.separator+newFileName);
        //判断目标文件所在的目录是否存在
        if(!newFile.getParentFile().exists()) {
            //如果目标文件所在的目录不存在,则创建父目录
            newFile.getParentFile().mkdirs();
        }
        System.out.println(newFile);
        //将内存中的数据写入磁盘
        try {
			file.transferTo(newFile);
		} catch (IllegalStateException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
        //完整的url
        String fileUrl =  newFileName;
        result.put("uploaded", 1);
        result.put("fileName", newFileName);
        result.put("url", fileUrl);
        return result.toJSONString();
    }

将复制的图片粘贴到编辑起内就会上传到服务器

你可能感兴趣的:(java)