关于CKEditor4.5.6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），自定义行高，去编辑器的中内容，将编辑器中内容设置到指定的位置等
关于CKEditor的一个配置整理，改文件为config.js：
文件内容如下：
| /** CKEDITOR.editorConfig = function( config ) { |
关于图片上传部分可以参考：
http://blog.csdn.net/itmyhome1990/article/details/17264627
实现过程中的一个案例
| /* * name :tuzuoquan * mail :[email protected] * date :2016/01/13 * version :1.0 * description:XXXXXX对应的js * CopyRight (C) 2015-12-31 */ if (CKEDITOR.env.ie && CKEDITOR.env.version < 9) CKEDITOR.tools.enableHtml5Elements(document);
/** * 编辑器对应的操作方法 * * 关于在线编辑器的文档：http://sdk.ckeditor.com/samples/resize.html */ var CKEDITORHandler = (function($) { return { /** * 初始化参数配置 */ ckeditorConfig:function(){ //去掉开始进来的时候自动添加 BR CKEDITOR.config.enterMode = CKEDITOR.ENTER_BR; //去掉开始进来的时候自动添加P CKEDITOR.config.shiftEnterMode = CKEDITOR.ENTER_P; CKEDITOR.config.font_names='微软雅黑;宋体;新宋体;黑体;隶书;幼圆;楷体_GB2312;仿宋_GB2312;方正舒体;方正姚体;华文隶书;华文新魏;华文行楷;sans-serif;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;' CKEDITOR.config.line_height="1em;1.1em;1.2em;1.3em;1.4em;1.5em"; }, /** * 初始化工具条的相关信息 */ initToolBar:function(){ CKEDITOR.config.toolbar = 'Full';
/** * 其中("-")为空间栏的水平分割，("/")为换行 * * 以下：Full表示的所有的操作 */ CKEDITOR.config.toolbar_Full = [ { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, { name: 'forms', groups: [ 'forms' ] }, { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, '/', { name: 'links', groups: [ 'links' ] }, { name: 'insert', groups: [ 'insert' ] }, { name: 'colors', groups: [ 'colors' ] }, { name: 'styles', groups: [ 'styles' ] }, { name: 'tools', groups: [ 'tools' ] }, { name: 'paragraph', groups: [ 'list', 'blocks', 'bidi', 'align', 'indent', 'paragraph' ] }, { name: 'others', groups: [ 'others' ] }, { name: 'about', groups: [ 'about' ] } ];
CKEDITOR.config.toolbar_Basic = [ ['Source','Preview'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','SpecialChar'], ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['lineheight'] ]; }, /** * 在线编辑器的初始化过程 * textContent :表示的是文本组件的内容 */ init:function(textContent){ //注意：这里的tpl-content-editor是编辑器对应的id值 if(CKEDITOR.instances.tplContentEditor) { var editor = CKEDITOR.instances["tplContentEditor"];
//console.log("1------------------------------------------"); //console.log(editor.getData()); //editor.setData(editor.setData(textContent)); //console.log("2------------------------------------------");
//销毁编辑器，然后新增一个 if(editor) editor.destroy(true); }
CKEDITORHandler.ckeditorConfig(); //初始化工具栏 CKEDITORHandler.initToolBar();
CKEDITOR.replace("tplContentEditor", { toolbar:'Basic', height:'300', width:'auto' });
//为编辑器设置内容 CKEDITOR.instances.tplContentEditor.setData(textContent); }, /** * 2、判断一个字符串变量是否为空 * 如果不为空：返回true * 如果为空:返回false */ isNotBlank:function(variable){ return (variable != null && typeof(variable) != "undefined" && variable != undefined && variable != "") ? true : false; }, /** * 通过编辑的icon获得组件元素,查找父元素，直到找到含有className这个类选择器的元素停止 * domEle :表示的是编辑的元素 */ /** * 将str1这个原始的字符串中的str2全部换成str3 * str1 :最原始的字符串 * str2 :要被替换的字符串 * str3 :最终替换成的字符串 * * 此外可以增加String对象的原型方法： * String.prototype.replaceAll = function(str2,str3){ * return this.replace(new RegExp(str2,"gm"),str3); * } */ replaceAll:function(str1,str2,str3) { var newStr = str1; if(this.isNotBlank(str1)) { //其中gm中的g表示"执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)" //其中gm中的m表示执行多行匹配 newStr = str1.replace(new RegExp(str2,"gm"),str3); } return newStr; }, /** * 清除样式 */ removeCss:function(id,childPathOfSelectedElement,cssType){ //替换原来的css样式 var oldStyleCss = $("#generatedCss").html().replace( new RegExp("#"+ id + childPathOfSelectedElement + ".*?{.*"+cssType+".*?}"),"");
oldStyleCss = this.replaceAll(oldStyleCss,"\r\n","");
$("#generatedCss").text(oldStyleCss); }, obtainComponentEle:function(domEle,className) { var tempObj = domEle; while(!$(tempObj).parent().hasClass(className)) { tempObj = $(tempObj).parent().get(0); }
return $(tempObj).parent().get(0); }, /** * 存储的是要编辑的对象 */ editObj : null, /** * 表示的是否是多列的 */ isMultiseriate : false, /** * 1、点击编辑按钮的时候执行的操作 * domEle :代表的是编辑按钮 * selectedElementInfo :表示的是被选中的元素 * childPathOfSelectedElement :表示的是放置内容的位置 * * isMultiseriate :表示的是是否多列 * obj :表示的是被点击的个元素 * * 如果是单列的： * 比如点击"text"组件"编辑"按钮的时候传递进入的参数是：(this,selectedElementInfo,'',false,'') * 如果实在配置文件中点击弹出的，传递的参数是：('',selectedElementInfo,' .xxx .xxx',false,''),其中' .xxx .xxx'是你要改变的元素 * * 如果是多列的： * ('',selectedElementInfo,'',true,editObj) */ tplEditSelectedContent:function(domEle,selectedElementInfo,childPathOfSelectedElement,isMultiseriate,editObj) { //存储的是点击的对象 CKEDITORHandler.editObj = editObj; //存储是否是多列的情况 CKEDITORHandler.isMultiseriate = isMultiseriate;
//如果是多列的 if(CKEDITORHandler.isMultiseriate) { //获得要编辑的元素的内容： var textContent = $(CKEDITORHandler.editObj).html(); } else { //获得domEle这个编辑按钮的组件 var componentEle = null; if(CKEDITORHandler.isNotBlank(domEle)) { componentEle = CKEDITORHandler.obtainComponentEle(domEle,"tpl-monitored-class"); } else { var id = selectedElementInfo.get("id"); componentEle = $("#" + id); }
//将当前元素的id存储到隐藏域中 $(".tpl-edit-popup-window #componentId").val($(componentEle).attr("id")); //存储要设置的元素的值 if(!CKEDITORHandler.isNotBlank($.trim(childPathOfSelectedElement))) { childPathOfSelectedElement = " .tpl-component-2015-12-30-text-content"; } //将要编辑的后代的值存到隐藏域中 $(".tpl-edit-popup-window #childPathOfSelectedElement").val(childPathOfSelectedElement);
//获得当前要编辑的元素的id var componentId = $(componentEle).attr("id"); //获得要编辑的元素的内容： var textContent = $("#" + componentId + " " + childPathOfSelectedElement).html(); }
//获得文本组件中的内容 CKEDITORHandler.init(textContent);
$('.theme-popover-mask').fadeIn(10); $('.theme-popover').slideDown(20); }, /** * 点击取消的时候执行的动作 * @return */ tplEditCancel:function() { $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }, /** * 点击"确定的时候执行的动作" * @return */ tplEditOk:function() { //获得编辑器中的内容 var editorContent = CKEDITOR.instances.tplContentEditor.getData(); var id = selectedElementInfo.get("id"); /** * 判断是否是多列的 */ if(CKEDITORHandler.isMultiseriate) { $(CKEDITORHandler.editObj).empty(); $(CKEDITORHandler.editObj).append(editorContent); } else { //1、首先判断编辑器内容中第一个子标签的内容是否是<pre>,若是，则在后面不在添加<pre> //$("<div></div>").append(editorContent).first().prop("tagName"); //$("<div></div>").append(editorContent).first().prop("nodeName");
//获得要修改的组件的id var componentId = $(".tpl-edit-popup-window #componentId").val(); //获得组件中要放置内容的元素 var childPathOfSelectedElement = $(".tpl-edit-popup-window #childPathOfSelectedElement").val();
$("#" + componentId + " " + childPathOfSelectedElement).empty(); $("#" + componentId + " " + childPathOfSelectedElement).append(editorContent); } if($("#" + id + " .picturegroup #topMarquee_1 li").length>0){ var currCount = $("#" + id + " .picturegroup #topMarquee_1 li").length; var baseHeight = 0; var i=0; for(;i<currCount;i++){ baseHeight += $("#" + id + " .picturegroup #topMarquee_1 li").eq(i).outerHeight(true); } var dyHeight = baseHeight + 'px'; var divHeight = baseHeight * 2 + 'px'; $("#" + id + " .picturegroup .picture-holder").css("height", dyHeight); $("#" + id + " .picturegroup div").css("height", divHeight);
} /*if($("#" + id + " .picturegroup #erwm").length>0){ this.removeCss(id," .picturegroup","height"); this.removeCss(id," .picturegroup #erwm","height"); var height = parseFloat($("#picHeight").val()); var spanHeight = $("#" + id + " .picturegroup #erwm .bottomContent").height(); console.log(spanHeight); $("#" + id + " .picturegroup").css("height","'+(height+spanHeight)+'+'px'"); $("#" + id + " .picturegroup #erwm").css("height","'+(height+spanHeight)+'+'px'"); }*/ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200);
//恢复默认值 CKEDITORHandler.isMultiseriate = false; CKEDITORHandler.editObj = null; } } })(jQuery);
/** * 1、页面加载完成后执行的动作 */ $(function(){ $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }); }); |
关于图片上传的后台操作，使用的框架是Spring+SpringMVC+MyBatis
| package XXX.controller.upload;
import org.apache.log4j.Logger;
@Controller @RequestMapping(value = "/import", method = { RequestMethod.GET,RequestMethod.POST }) public class ImportController extends BaseController{ /** 用于打印日志 */ private static final Logger logger = Logger .getLogger(SpecialController.class);
/** * 此方法用于CKEditor的本地上传图片的功能 * * @param param * @param imageFile * @return */ @RequestMapping(value = "/ckeditorUploadFile", produces = "text/json") public void ckeditorUploadFile( @RequestParam("upload") MultipartFile upload, HttpServletRequest request, HttpServletResponse response, @RequestParam("CKEditorFuncNum")String CKEditorFuncNum) throws IllegalStateException,IOException {
PrintWriter out = response.getWriter(); response.setCharacterEncoding("utf-8");
//判断扩展文件名是否正确 String uploadContentType = upload.getContentType(); if(uploadContentType.equals("image/pjpeg") || uploadContentType.equals("image/jpeg")) {
} else if(uploadContentType.equals("image/png") || uploadContentType.equals("image/x-png")) {
} else if(uploadContentType.equals("image/gif")) {
} else if(uploadContentType.equals("image/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 (!upload.isEmpty()) { try { //如果上传的图片大于10M,返回提示 if (upload.getSize() > 10 * 1024 * 1024) { out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",''," + "'文件大小不得大于600k');"); out.println("</script>");
return; }
Calendar calendar = Calendar.getInstance();//获取当前时间 //时间路径，解压文件，以年月日创建文件夹 String dataPath ="/"+calendar.get(Calendar.YEAR)+"/" + (calendar.get(Calendar.MONTH)+1)+"/" + calendar.get(Calendar.DATE)+"/"; // 原文件名 String srcName = upload.getOriginalFilename(); //获取上传文件后缀 String suffix = srcName.substring(srcName.lastIndexOf(".") + 1, srcName.length()).toLowerCase(); //随机生成32位id,用于解压文件目录 String uuid = UUIDGenerator.generate(); //新的文件名，随机的uuid; String picName = uuid +"."+suffix;
//图片存储的实际路径 String urlPrefix = ExtendedServerConfig.getInstance().getStringProperty("VISITE_PREFIX_URL"); //大图缩略图生成路径 String thumbnailPath =ExtendedServerConfig.getInstance() .getStringProperty("THUMBNAIL_PATH")+ ExtendedServerConfig.getInstance() .getStringProperty("SAVE_BIG_THUMBNAIL")+dataPath; //生成缩略图保存数据库路径 String savePath =ExtendedServerConfig.getInstance() .getStringProperty("SAVE_BIG_THUMBNAIL")+dataPath+picName; //文件夹不存在，则创建 File destfile = new File(thumbnailPath); if(!destfile.exists()){ destfile.mkdirs(); } // 写文件 InputStream fi = upload.getInputStream(); //上传文件写入到配置文件夹下 FileUtils.writeFile(fi, thumbnailPath+picName); File file = new File(thumbnailPath+picName); if(file.exists()) { out.println("<script type=\"text/javascript\">"); out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'" + urlPrefix + savePath + "','')"); out.println("</script>");
return; } } catch (Exception e) { e.printStackTrace(); } } return; } } |