java添加Ckeditor编辑器

实现效果:
这里写图片描述
1:添加Ckediter的编辑器js文件下载地址:http://download.csdn.net/download/xuanzhangran/9933856
2:下载之后解压缩,将文件放在项目的js文件下。
图片

3:代码样式如下:
(1):在jsp页面引入:<script type="text/javascript" src="<%=basePath%>js/ckeditor/ckeditor.js"></script>
(2):<!--调用编辑器-->
<script type="text/javascript">
//初始化文本编辑器
    CKEDITOR.replace('contect_text');
</script>


(3)://需要添加文本编辑器的地方
<!-- 文本编辑器  开始 -->
    <textarea name="content" id="contect_text" class="ckeditor"></textarea> 
 <!-- 文本编辑器  结束-->      

(4):需要变更的地方:

如果编辑器需要上传图片,那么只需要修改:Ckediter中的config.js即可。这里写图片描述

(5):本案例已经将config.js修改完毕。

(6):在config.js中有上传图片需要调用后台的代码:我给他封装成了一个工具类。直接复制过去即可。这里写图片描述

    /**
     * @Description: 使用ckeditor上传图片文件并显示  
     *              (该方法只用于文本编辑器图片上传)
     * @author: 
     * @date: 
     * @return:String
     */
@Controller
@RequestMapping("/CkeditorUpload")
public class CkeditorUpload {

    /**
     * 
        * @Title: uploadPicture
        * @Description: Ckeditor 上传图片工具类
        * @param file
        * @param request
        * @param response
        * @throws IOException    参数
        * void   返回类型
        * @throws
     */
    @RequestMapping("/uploadImg.html")
    public void uploadPicture(
            @RequestParam(value="upload",required=false)MultipartFile file,
            HttpServletRequest request,HttpServletResponse response) throws IOException{ 
        response.setCharacterEncoding("utf-8");  
        PrintWriter out = response.getWriter();  

        File targetFile=null;
        String msg="";//返回存储路径
        if (file!=null) {
            String fileName=file.getOriginalFilename();//获取文件名加后缀
            if(fileName!=null&&fileName!=""){   
                String returnUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() +"/upload/imgs/";//存储路径
                String path = request.getSession().getServletContext().getRealPath("upload/imgs"); //文件存储位置
                String fileF = fileName.substring(fileName.lastIndexOf("."), fileName.length());//文件后缀
                fileName=new Date().getTime()+"_"+new Random().nextInt(1000)+fileF;//新的文件名

                //先判断文件是否存在
                String fileAdd = DateUtil.format(new Date(),"yyyyMMdd");
                File file1 =new File(path+"/"+fileAdd); 
                //如果文件夹不存在则创建    
                if(!file1 .exists()  && !file1 .isDirectory()){       
                    file1 .mkdir();  
                }
                targetFile = new File(file1, fileName);
                try {
                    file.transferTo(targetFile);
                    msg=returnUrl+fileAdd+"/"+fileName;

                     //获取 CKEditor提交的很重要的一个参数  
                    String callback = request.getParameter("CKEditorFuncNum");
                 // 返回“图像”选项卡并显示图片
                    out = response.getWriter();
                    out.println("<script type=\"text/javascript\">");
                    out.println("window.parent.CKEDITOR.tools.callFunction("
                            + callback
                            + ",'"
                            + msg+ "','')"); // 相对路径用于显示图片
                    out.println("</script>");

                } catch (Exception e) {
                    e.printStackTrace();
                }
            }           
        }
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值