关于Ckeditor编辑器（一）

ckeditor编辑器上传图片

1.基本配置
a.官网下载ckeditor压缩包。
官网地址
b.将解压后的js引入页面
如：

c.需要使用该编辑器的页面增加 textarea

d.修改配置文件config.js里图片上传路径
config.filebrowserImageUploadUrl=“imageUpload”;
其中
imageUpload为处理图片上传的方法

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here.
	// For the complete reference:
	// http://docs.ckeditor.com/#!/api/CKEDITOR.config
	// The toolbar groups arrangement, optimized for two toolbar rows.
	config.toolbarGroups = [
		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        //{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
		//{ name: 'links' },
		{ name: 'insert' },
		{ name: 'forms' },
		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
		{ name: 'tools' },
		//{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
		//{ name: 'others' },
		'/',
		{ name: 'styles' },
		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
		{ name: 'colors' },
		//{ name: 'about' }
	];

	config.removeButtons = 'Underline,Subscript,Superscript';
	
	config.format_tags = 'p;h1;h2;h3;pre';
	
	config.removeDialogTabs = 'image:advanced;link:advanced';

    config.image_previewText=' '; //预览区域显示内容

    config.filebrowserImageUploadUrl="imageUpload"; //要上传的action或servlet

     //config.width=1200;//宽度
      config.height = 500; //高度
    
    config.extraPlugins = 'font,justify';//支持中文字体字号，和文字居中
    
    config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312;'+
    '楷体_GB2312/KaiTi_GB2312;黑体/SimHei;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;'+
    '华文仿宋/STFangsong;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;'+
    '方正舒体/FZShuTi;方正姚体/FZYaoti;细明体/MingLiU;新细明体/PMingLiU;微软雅黑/Microsoft YaHei;微软正黑/Microsoft JhengHei;'+
    'Arial Black/Arial Black;';

    config.FontSizes = '56px/初号;48px/小初;34px/一号;32px/小一;29px/二号;24px/小二;21px/三号;20px/小三;18px/四号;16px/小四;14px/五号;12px/小五;10px/六号;8px/小六' ;    //设置字体大小时 使用的式样

    //当从word里复制文字进来时，是否进行文字的格式化去除
    config.pasteFromWordIgnoreFontFace = true; //默认为忽略格式
    
    //工具栏是否可以被收缩
    config.toolbarCanCollapse = true;
    
    config.removePlugins = 'elementspath';

};

e.后台代码处理上次结果并返回到页面

@Get("imageUpload")
	@Post("imageUpload")
	public void ImageUpload(HttpServletRequest request, HttpServletResponse response){
        try {
            ImageUploadUtil.ckeditor(request, response);
        } catch (IllegalStateException e) {
            PrintException.printStackTrace(e);
        } catch (IOException e) {
            PrintException.printStackTrace(e);
        }
	}
	

 /**
     * ckeditor文件上传功能，回调，传回图片路径，实现预览效果。
     * 
     * @Title ckeditor
     * @param request
     * @param response
     *
     * @throws IOException
     */
    public static void ckeditor(HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        String fileName = upload(request, response);
        if(fileName==null){
        	response.setContentType("text/html;charset=UTF-8");
        	String callback = request.getParameter("CKEditorFuncNum");
            PrintWriter out = response.getWriter();
       	    out.println(""); 
            out.flush();
            out.close();
        }
        else{
        	// 结合ckeditor
            // imageContextPath为图片在服务器地址
        	String imageContextPath="http://p.ananas.chaoxing.com/star3/origin/"+fileName+".png";
            response.setContentType("text/html;charset=UTF-8");
            String callback = request.getParameter("CKEditorFuncNum");
            PrintWriter out = response.getWriter();
            out.println("");
            out.flush();
            out.close();
        }
        
    }

 /**
     * 图片上传
     * 
     * @Title upload
     * @param request
     *
     * @return
     * @throws IllegalStateException
     * @throws IOException
     */
    public static String upload(HttpServletRequest request, HttpServletResponse response) throws IllegalStateException,
            IOException {
        // 创建一个通用的多部分解析器
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
        // 图片名称
        String ret=null;
        // 判断 request 是否有文件上传,即多部分请求
        if (multipartResolver.isMultipart(request)) {
            // 转换成多部分request
            MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
            // 取得request中的所有文件名
            Iterator iter = multiRequest.getFileNames();
            while (iter.hasNext()) {
                // 取得上传文件
                MultipartFile file = multiRequest.getFile(iter.next());
                if (file != null) {
                    // 取得当前上传文件的文件名称
                    String myFileName = file.getOriginalFilename();
                    if (myFileName.trim() != "") {
                        // 获得图片的原始名称
                        String originalFilename = file.getOriginalFilename();
                        // 获得图片后缀名称,如果后缀不为图片格式，则不上传
                        String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
                        if (!fileTypes.contains(suffix)) {
                            return null;
                        }
                        else{
                            ret=UploadFileUtil.upload(file.getOriginalFilename(), file.getBytes());
                        }
                    }
                    }
               }
        }
        return ret;
    }
     

f.实现效果