富文本编辑器CKEditor的使用心得
1.在JSP页面导入脚本文件
2.写JQuery或JS脚本：
$(function() {
var ckEditorName = CKEDITOR.replace('CONTENT', {
//不使用自带的配置文件(全局配置配置在config.js中)，在ckeditor文件夹下建立customConfig文件夹，把config.js复制一份,ckeditor会从ckeditor文件夹下开始找
customConfig : 'customConfig/tb_gov_news.js'
})
});3.创建自定义的配置文件tb_gov_news.js放在customConfig文件夹下
CKEDITOR.editorConfig = function(config) {
config.language = 'zh-cn';
// 设置宽高
config.width = 600;
config.height = 400;
// 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2'
config.image_previewText = ''; // 清空预览区域显示内容
// 设置提交上传图片的路径
config.filebrowserImageUploadUrl = 'ckUploadImage.do';
// 当提交包含有此编辑器的表单时，是否自动更新元素内的数据
config.autoUpdateElement = true;
config.resize_enabled = true;
// 设置是使用绝对目录还是相对目录，为空为相对目录
config.baseHref = '';
// 编辑器的z-index值
config.baseFloatZIndex = 10000;
// 配置工具栏
config.toolbar = [
// 加粗 斜体， 下划线 穿过线 下标字 上标字
[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript' ],
// 数字列表 实体列表 减小缩进 增大缩进
[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent' ],
// 左对齐 居中对齐 右对齐 两端对齐
[ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
// 超链接 取消超链接 锚点
[],
// 图片 flash 表格 水平线 表情 特殊字符 分页符
[ 'Image', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak' ],
// 样式 格式 字体 字体大小
[ 'Styles', 'Format', 'Font', 'FontSize' ],
// 文本颜色 背景颜色
[ 'TextColor', 'BGColor' ],
// 全屏 显示区块
[ 'Maximize', 'ShowBlocks', '-' ] ]
};
4.在Controller中实现图片/文件上传的方法映射
/**
* 富文本编辑器图片的异步上传
* @param request
* @param session
* @param response
* @return
* @throws Exception
*/
@RequestMapping(value="ckUploadImage")
public String ckUploadImage(HttpServletRequest request,HttpSession session,
HttpServletResponse response) throws Exception {
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
// 上传的图片文件
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest
.getFile("upload");
// 当我们设置editorObj.config.filebrowserImageUploadUrl = "新地址"时CKeditor会自动为我们增加几个个url参数：
//新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn 其中CKEditorFuncNum参数需要回传给ckeditor
String callback = request.getParameter("CKEditorFuncNum");
int i = file.getOriginalFilename().lastIndexOf(".");
if (i == -1) {
out.println("");
return null;
}
String extend = file.getOriginalFilename().substring(i);
if (!extend.equalsIgnoreCase(".jpg")
&& !extend.equalsIgnoreCase(".gif")
&& !extend.equalsIgnoreCase(".bmp")
&& !extend.equalsIgnoreCase(".png")) {
out.println("");
return null;
}
long size = file.getSize();
if (size > 10 * 1024 * 1024) {
out.println("");
return null;
}
// 将文件保存到项目目录下，返回图片保存地址
String fileName = null;
String filePath = session.getServletContext().getRealPath("/uploadFiles/goodsDetail");
fileName = FileUpload.fileUp(file, filePath, UuidUtil.get32UUID());
if ("".equals(fileName)) {
out.println("");
return null;
}
if ("failed".equals(fileName)) {
out.println("");
return null;
}
// 返回“图像”选项卡并显示图片
//
out.println("");
return null;
}5.注意事项（避坑提醒）
CKEditor 编辑器是增强过的 textarea 元素,在填写了内容之后，编辑器并不立即把内容更新到原来的 textarea 元素中的,而是等到 submit 事件之前把编辑器的内容更新到 textarea 中。
因此,普通的js验证或是jquery validate验证都获取不到编辑器的值.
这里我遇到的问题是：用Jquery判空时textarea.val()总是为空，填了值也校验不通过。一番检测后发现它每次校验取得值都是前一次textarea的文本值（即未更新），所以在第一次填入（"新增"操作）时的非空校验总是取到空值，验证不通过，无法提交。
解决的办法：
if($("#CONTENT").val() == ""){
alert($("#CONTENT").val()) //显示的是前一次的值
$("#CONTENT").tips({
side:3,
msg:'请输入内容',
bg:'#AE81FF',
time:2
});
$("#CONTENT").focus();
return false;
}
if(CKEDITOR.instances.CONTENT.getData() == ""){
$("#CONTENT").tips({
side:3,
msg:'请输入内容',
bg:'#AE81FF',
time:2
});
$("#CONTENT").focus();
return false;
}