ckeditor上传图片，自定义栏目

先下载完整的ckeditor包，我已上传

引入js

 <script charset="utf-8" src="/js/ckeditor/ckeditor.js"></script>
<script charset="utf-8" src="/js/ckeditor/config.js"></script>

html

<textarea name="text" id="ckeditor" cols="45" rows="5">${content.text}</textarea>

config.js全部

   CKEDITOR.editorConfig = function( config )
{
config.filebrowserUploadUrl="/article/ckeditor?attachType=article";//图片上传url
config.image_previewText = ''; //清空预览区域显示内容
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =  
       [  
           ['Source','Bold', 'Italic', 'Underline', 'JustifyLeft', 'JustifyCenter','JustifyRight','JustifyBlock','Font','TextColor','FontSize','Image']
 ]; 
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};

html页面js

   <script type="text/javascript" >
    CKEDITOR.replace('ckeditor');   //content为textarea的id
</script>

如何获取控件内容

  var content = CKEDITOR.instances.ckeditor.getData();

  

java:

/***
* 上传图片（不支持多文件）
* @param file
* @param request
* @param model
* @return
* @throws IOException 
*/
@ResponseBody
@RequestMapping(value = "/article/ckeditor")  
    public void ckeditor( HttpServletRequest request, ModelMap model,HttpServletResponse response) throws IOException {  
        // 创建一个通用的多部分解析器
String fileName = new Date().getTime() + ".jpg"; 
        String attachType=param("attachType","ad");//我自己项目业务参数
        String key = attachType+"/" + DateUtil.getStrFromDate(new Date(),"yyyyMMdd") + "/" + fileName;       

CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession()
                .getServletContext());
        if (multipartResolver.isMultipart(request)) {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
           // 取得request中的所有文件名
             Iterator<String> iter = multiRequest.getFileNames();
             while (iter.hasNext()) {
            MultipartFile file = multiRequest.getFile(iter.next());
            if(file!=null){
                   try {
            UploadManager.uploadImg(key, file.getBytes());//我的是七牛上传，可以换成你自己项目的方法
            } catch (IOException e) {
            e.printStackTrace();
            }
            }
             }
        }
        response.setContentType("text/html;charset=UTF-8");
        String callback = request.getParameter("CKEditorFuncNum");
        PrintWriter out = response.getWriter();
        out.println("<script type=\"text/javascript\">");
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + "http://img1.51travelpay.com/" + key + "',''" + ")");
        out.println("</script>");
        out.flush();
        out.close();
    }