springmvc集成ckeditor_4.7.3_full

1 下载ckeditor_4.7.3_full

2 解压将ckeditor整个目录拷贝到项目目录

3 编辑ckeditor\plugins\image\image.js，修改2处代码

1) 清理如图的文字，文字很长的。默认ckeditor无图片情况下会显示很长的文字。

2) 将 hidden:!0改成 hidden:0 ，ckeditor会显示上传功能

4 编辑ckeditor\config.js,配置ckeditor的参数


CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
   // config.language = 'fr';
    /**配置语言*/
    //config.language = 'zh-cn';
    /**配置界面颜色*/
    //config.uiColor = '#AADC6E';
    /**配置字体*/
    config.font_names='宋体/SimSun;新宋体/NSimSun;仿宋_GB2312/FangSong_GB2312;楷体_GB2312/KaiTi_GB2312;黑体/SimHei;微软雅黑/Microsoft YaHei;'+ config.font_names;
    /**配置工具栏*/
    /*
    config.toolbar = 'Basic';
    config.toolbar_Basic =
        [
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
        ];
    */
};

5 编写jsp代码

<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../../../taglib/taglibs.jsp" %>
<html>
<head>
    <title>ckeditor</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" type="image/x-icon" href="${ctx}/images/favicon.ico" media="screen"/>
    <script type="text/javascript" src="${ctx}/js/ckeditor/ckeditor.js"></script>
</head>
<style>
    html, body {
width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    .ckeditorParent{
width: 100%;
        height: 80%;
    }
</style>
<body>
<div class="ckeditorParent">
<textarea style="width: 100%;height: 100%;padding: 0;border: 0;margin: 0;" name="content" id="contect_text" class="ckeditor"></textarea>
</div>
<input onclick="alert(CKEDITOR.instances.contect_text.getData())" type="button" value="获取内容" />
</body>
<script>
//初始化编辑器
var cKeditor=CKEDITOR.replace('contect_text',{
//uiColor : '#7682ee',
    filebrowserImageUploadUrl: "${ctx}/upload/ckEditorImageUpload"
});
</script>
</html>

6 配置上传图片地址

filebrowserImageUploadUrl: "${ctx}/upload/ckEditorImageUpload"

7 上传接口代码

/**
 * CKeditor 上传
 * @param file
 * @param useid
 * @param request
 * @param model
 * @param response
 * @return
 * @throws IOException
 */
@RequestMapping(value = "/ckEditorImageUpload")
public void ckEditorImageUpload(
@RequestParam(value = "upload", required = false) MultipartFile file,
        @RequestParam(value = "useid", required = false) String useid,
        HttpServletRequest request, ModelMap model,
        HttpServletResponse response) throws IOException {

//获取CKEditor提交的一个参数，回调设置图片路径
    String callback = request.getParameter("CKEditorFuncNum");
    //图片完整路径
    String imgUrl = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath();

    String fileUrl = UploadFileUtil.copyFile(file, request);   
    imgUrl=imgUrl+"/"+fileUrl;
    PrintWriter out = response.getWriter();
    out = response.getWriter();
    out.println("<script type=\"text/javascript\">");
    out.println("window.parent.CKEDITOR.tools.callFunction("
            + callback
            + ",'"
            + imgUrl+ "','')");
    out.println("</script>");
}

8 上传效果

window.parent.CKEDITOR.tools.callFunction 的作用是吧上传成功后图片网址赋值的URL文本框中。

9 获取ckeditor内容

CKEDITOR.instances.contect_text.getData()

contect_text 是textarea 的 id

springmvc集成ckeditor_4.7.3_full

相关推荐