j2ee 简单网站搭建：（十一）ckeditor 控件使用入门

《j2ee 简单网站搭建：（一） windows 操作系统下使用 eclipse 建立 maven web 项目》
《j2ee 简单网站搭建：（二）添加和配置 spring + spring-mvc 的 mvc 开发环境》
《j2ee 简单网站搭建：（三）在搭建好的 spring maven web 项目中加入 mybatis 访问数据库》
《j2ee 简单网站搭建：（四）将 freemaker 模板引擎作为 spring-mvc 展现层》
《j2ee 简单网站搭建：（五）使用 jcaptcha 生成验证码图片》
《j2ee 简单网站搭建：（六）使用 hibernate validation 实现 domain 层实体类验证》
《j2ee 简单网站搭建：（七）使用 shiro 结合 jcaptcha 实现用户验证登录》
《j2ee 简单网站搭建：（八）使用 jquery-validate 实现页面验证入门》
《j2ee 简单网站搭建：（九）jquery datatables + jquery ui dialog 插件使用入门》
《j2ee 简单网站搭建：（十）jquery ztree 插件使用入门》
《j2ee 简单网站搭建：（十一）ckeditor 控件使用入门》

ckeditor 版本 4ckeditor 使用很简单，一般只要以下几步即可
1) 引用 js 文件
2) 在 html 页面中添加需要绑定 ckeditor 的 textarea 标签
3) 对 ckeditor 进行设置，其中包括需要上传图片时的上传文件处理路径

以下为 html 中的示例代码片段

<!-- CKEditor 相关文件 -->
<script type="text/javascript" src="你的文件位置/ckeditor.js"></script>

<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
// ckeditor 的绑定和初始化设置
// 这里的 txt_content 是页面中绑定 ckeditor 的控件，filebrowserImageUploadUrl:'../picture_upload' 是上传图片的处理路径
var editor = CKEDITOR.replace('txt_content', { filebrowserImageUploadUrl:'../picture_upload'});
$(document).ready(function () {
/* - ckeditor start - */

// 1.form submit 必须放在 validate 之前
// 2.在 jquery validate 的 rules 里面将 ignore设置为空
// 3.在 form submit 时更新 ckeditor 的 instance
// 4.更改 jquery validate 的 errorPlacement 让 label.error 显示在正确位置
editor.on("instanceReady", function() {
//set keyup event
this.document.on("keyup", function() {
CKEDITOR.tools.setTimeout( function() {
$("#txt_content").val(editor.getData());
$("#txt_content").trigger('keyup');
}, 0);
});
//and paste event
this.document.on("paste", function() {
CKEDITOR.tools.setTimeout( function()
{
$("#txt_content").val(editor.getData());
$("#txt_content").trigger('keyup');
}, 0);
});

});
$('#bt_submit').click(function() {
if ($('#form_add').valid()) { // 除ztree外都验证通过
if (zTree.getCheckedNodes(true).length < 1) { // ztree有选择
$('#b_categorytree_validate').remove();
$('#categorytree').after("<b id='b_categorytree_validate'>请选择文章类型</b>");
}
else { // 所有验证都通过，进行数据添加
$('#dlbox_add_confirm').dialog('open');    // 打开弹出框
}
}
});

$("#form_add").validate({ // 添加表单验证
rules: { // 验证规则
ipt_title: {required: true, minlength: 5}, // 必填长度至少5位
txt_content: {required: true}
},
messages: { // 验证失败消息
ipt_title: {required: "请输入标题", minlength: "标题长度不能小于5位"},
txt_content: {required: "请输入文章内容"}
},
ignore: '', // 这个设置是关键
errorPlacement: function(error, element) {
if (element.attr('name') == 'txt_content') {
error.insertAfter($(element).parent().children().last());
} else {
error.insertAfter(element);
}
}
});
/* - ckeditor end - */

});

</script>

以下是服务端处理图片的代码片段

@RequestMapping(value = "/picture_upload", produces = "application/json;charset=UTF-8")
public void pictureUpload(@RequestParam("upload") MultipartFile file,
@RequestParam("CKEditorFuncNum") String CKEditorFuncNum,
HttpServletRequest request,
HttpServletResponse response) throws IOException {
String serverImageDirectory = request.getSession().getServletContext().getRealPath(ConfigUtil.SERVER_IMAGE_DIRECTORY);
String imageFileName = System.currentTimeMillis() + "_" + file.getOriginalFilename();
PrintWriter out = response.getWriter();
response.setContentType("text/html;charset=UTF-8");
response.setHeader("X-Frame-Options", "SAMEORIGIN");

out.println("<script type=\"text/javascript\">");

try {
File saveFile = new File(serverImageDirectory + imageFileName);
File parentFile = saveFile.getParentFile();
if (!parentFile.exists())
parentFile.mkdir();
file.transferTo(saveFile);
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",'" + ConfigUtil.SERVER_IMAGE_DIRECTORY + imageFileName + "', '');");
}
catch (Exception e){
out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
+ ",''," + "'图片上传失败！');");
}

out.println("</script>");
out.flush();
}