关于CKEditor4.5.6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），自定义行高，去编辑器的中内容，将编辑器中内容设置到指定的位置等

实现过程中的一个案例

* name : tuzuoquan

* mail : tuzq@XXXX.cn

* 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);