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

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

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

3.前台导入ckedtior4.9.2的js

<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>   
	<script src="/ckeditor/config.js" type="text/javascript"></script> 

 4.html代码

<textarea name="content" id="editor"></textarea>

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();
    }

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值