ckeditor是一款富文字編輯器，類似於論壇帖子下邊的回覆輸入框。

1、先要下載相應js檔案，點我下載。根據自己的需求選擇外掛的豐富程度，下載後解壓得到一個資料夾，放到webRoot目錄下。

2、在jsp頁面或html頁面引入核心js。

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

3、在需要引入富文字的地方加入一個textarea標籤。

<textarea name="ckeditor"></textarea></td>

4、注意name屬性，然後在頁面中加下下面js程式碼，效果就出來了。

<script>
CKEDITOR.replace('ckeditor');
</script>

5、很簡單，但是此時我們發現，編輯器上的上傳圖片功能沒有。所以程式碼需要改成下面這樣。

<script>
CKEDITOR.replace('afficheContent',{   
filebrowserImageUploadUrl : '${ctx}/uploadImg/uploadImg',  
language : 'zh-cn',  
});
</script>

6、這裡的filebrowserImageUploadUrl 是我寫的一個上傳圖片的介面，程式碼如下。

@Controller
@RequestMapping("uploadImg")
public class FileUploadController {
    /*
     * 圖片命名格式
     */
    private static final String DEFAULT_SUB_FOLDER_FORMAT_AUTO = "yyyyMMddHHmmss";

    protected Logger logger = Logger.getLogger(FileUploadController.class);

    /*
     * 上傳圖片資料夾
     */
    private
 
 static final String UPLOAD_PATH = "/upload/CKimg/";

    /*
     * 上傳圖片
     */
    @RequestMapping(value = "uploadImg")
    public void uplodaImg(@RequestParam("upload") MultipartFile file,//
            HttpServletRequest request, //
            HttpServletResponse response)//
    {

        try {

            String proPath = request.getSession().getServletContext()
                    .getRealPath("/");
            String proName = request.getContextPath();
            String path = proPath + UPLOAD_PATH;
            PrintWriter out = response.getWriter();
            String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
            String fileName = file.getOriginalFilename();
            String uploadContentType = file.getContentType();
            String expandedName = "";
            if (uploadContentType.equals("image/pjpeg")
                    || uploadContentType.equals("image/jpeg")) {
                // IE6上傳jpg圖片的headimageContentType是image/pjpeg，而IE9以及火狐上傳的jpg圖片是image/jpeg
                expandedName = ".jpg";
            } else if (uploadContentType.equals("image/png")
                    || uploadContentType.equals("image/x-png")) {
                // IE6上傳的png圖片的headimageContentType是"image/x-png"
                expandedName = ".png";
            } else if (uploadContentType.equals("image/gif")) {
                expandedName = ".gif";
            } else if (uploadContentType.equals("image/bmp")) {
                expandedName = ".bmp";
            } else {
                out.println("<script type=\"text/javascript\">");
                out.println("window.parent.CKEDITOR.tools.callFunction("
                        + CKEditorFuncNum + ",'',"
                        + "'檔案格式不正確（必須為.jpg/.gif/.bmp/.png檔案）');");
                out.println("</script>");
                return;
            }
            if (file.getSize() > 1024 * 1024 * 2) {
                out.println("<script type=\"text/javascript\">");
                out.println("window.parent.CKEDITOR.tools.callFunction("
                        + CKEditorFuncNum + ",''," + "'檔案大小不得大於2M');");
                out.println("</script>");
                return;
            }
            DateFormat df = new SimpleDateFormat(DEFAULT_SUB_FOLDER_FORMAT_AUTO);
            fileName = df.format(new Date()) + expandedName;
            file.transferTo(new File(path + "/" + fileName));
            out.println("<script type=\"text/javascript\">");
            out.println("window.parent.CKEDITOR.tools.callFunction("
                    + CKEditorFuncNum + ",'" + proName + "/upload/CKimg/"
                    + fileName + "','')");
            out.println("</script>");
            return;
        } catch (IllegalStateException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

至此，所有功能都已經實現。