关于CKEditor的一个配置整理，改文件为config.js：

文件内容如下：

/**
 * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
 // Define changes to default configuration here. For example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 config.toolbarGroups = [
  { 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' ] }
 ];
 // config.removeButtons = 'Source,Save,Templates,Cut,Undo,Find,Scayt,SelectAll,Paste,Copy,Redo,NewPage,Preview,Print,Form,Bold,RemoveFormat,Link,Image,TextColor,Outdent,JustifyLeft,BidiLtr,Blockquote,NumberedList,UIColor,lineheight';
 config.line_height ='8px;9px;10px;11px;12px;13px;14px;15px;16px;17px;18px;19px;20px;21px;22px;23px;24px;25px;26px;27px;28px;29px;30px;31px;32px;33px;34px;35px;36px;37px;38px;39px;40px;41px;42px;43px;44px;45px;46px;47px;48px;49px;50px;51px;52px;53px;54px;55px;56px;57px;58px;59px;60px;61px;62px;63px;64px;65px;66px;67px;68px;69px;70px;71px;72px;';
 config.skin = 'office2013';
 config.extraPlugins='imagepaste';
 config.pasteFromWordRemoveFontStyles = false;
 config.pasteFromWordRemoveStyles = false;
 config.extraPlugins = 'uploadwidget';
 config.extraPlugins = 'notificationaggregator';
 config.extraPlugins = 'notification';
 config.extraPlugins = 'uploadimage';
 config.extraPlugins = 'toolbar';
 config.extraPlugins = 'button';
 config.extraPlugins = 'filetools';
 config.extraPlugins = 'clipboard';
 config.extraPlugins = 'dialog';
 config.extraPlugins = 'dialogui';
 config.extraPlugins = 'widget';
 config.extraPlugins = 'lineutils';
 config.extraPlugins = 'widget';
 config.SecureImageUploads = true;
 config.image_previewText=' '; //预览区域显示内容
 //config.filebrowserUploadUrl: "import/ckeditorUploadFile.action";
 config.filebrowserImageUploadUrl = basePath + "/import/ckeditorUploadFile.action?type=Image"; //待会要上传的action或servlet
 
};

关于图片上传部分可以参考：

http://blog.csdn.net/itmyhome1990/article/details/17264627

实现过程中的一个案例

/*

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

});

});

关于图片上传的后台操作，使用的框架是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;

}

}


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

  1. Spring自定义数据源配置不当引起的Mybatis拦截器Interceptors 失效/不生效

    目录 内容 Interceptor接口与@Intercepts注解 PageHelper实现拦截器 默认数据源与拦截器 自定义数据源与拦截器的问题 自定义数据源注入拦截器 内容 Interceptor ...

  2. android 自定义actionbar前面有一块空白,解决Android V7后自定义Toolbar、ActionBar左侧有空白问题...

    如图所示: 1.查看Wiget.AppCompat.Toolbar的parent主题,如下所示: @style/TextAppearance.Widget.AppCompat.Toolbar.Titl ...

  3. 自定义ToolBar

    一.Toolbar的简介 Toolbar 是 android 5.0 引入的一个新控件,Toolbar出现之前,我们很多时候都是使用ActionBar以及ActionActivity实现顶部导航栏的, ...

  4. 自定义Toolbar的一些小技巧

    目录 1.改变Toolbar高度(解决图标不垂直居中) 2.改变toolbar弹窗菜单样式 3.改变toolbar整体样式 4.改变searchview样式 1.改变Toolbar高度(解决图标不垂直 ...

  5. ABAP ALV OO 自定义Toolbar 和Command及listmenu按钮

    ALV OO 自定义Toolbar 和Command及listmenu按钮 前言 OOALV容器 OOALV 工具栏 1.定义OO 对象及字段 2.OO ALV FIELDCAT 字段定义 3.定义类 ...

  6. Android自定义Toolbar以及设置圆形导航图标

    我们希望可以自定义Toolbar,实现一些特定的功能,android.support.v7.widget.Toolbar正好完成这些工作 首先看一下我们预期的效果图: 先看一下Toolbar的布局 & ...

  7. android toolbar 自定义,Android自定义Toolbar使用方法详解

    本篇文章介绍: 如何使用Toolbar; 自定义Toolbar; 先来看一看效果,了解一下toolbar: 布局文件: android:id="@+id/toolbar" andr ...

  8. android toolbar 自定义,自定义Toolbar，解决你所有的适配苦恼！

    About Toolbar Toolbar是一个官方ToolBar的扩展工具类,省去了对不同版本适配的复杂方案,它可以帮助你轻松实现NavigationBar和StatusBar的样式管理,最最重要的 ...

  9. 自定义ToolBar的使用

    自定义ToolBar的使用 源码地址:https://github.com/Bacsonlx/Android-CNiaoShop/tree/master/CNiaoShop_02 代码中:MainAc ...

最新文章

  1. 【linux】Valgrind工具集详解（六）：使用Valgrind gdbserver和GDB调试程序
  2. 在华为写了 13 年代码，都是宝贵的经验
  3. 一个简单的时间片轮转多道程序内核代码分析
  4. WordPress让文本小工具支持简码
  5. 【python教程入门学习】python入门：来来来，每天10点定时签到拿京豆啦
  6. glide加载图片闪烁_html5 canvas绘制图片
  7. mysql select call_MySQL的SQL语句 - 数据操作语句（1）- CALL 语句
  8. k8s集群资源监控-监控指标和方案---K8S_Google工作笔记0052
  9. L1-014. 简单题-PAT团体程序设计天梯赛GPLT
  10. pytorch ResNet结构代码实现
  11. java 消息队列_消息队列-RabbitMQ在JAVA中的应用（1）
  12. Equals() 和 运算符 == 重载准则 （C# 编程指南）
  13. weblogic部署war
  14. Ubuntu20破解管理员root密码忘记密码找回
  15. hive修复分区或修复表 以及msck命令的使用
  16. 2-AltiumDesigner原理图设计
  17. asp+access实现增删改查
  18. 计算机基础及msoffice应用内容,计算机一级计算机基础及 ms office 应用考些什么 自考计算机应用基础，要考哪些内容？...
  19. 学习笔记(05):mySQL数据库开发教程-域完整性-默认值约束
  20. google paly发布app设备兼容性的识别

热门文章

  1. 初学者用pycharm创建一个django项目和一个app时需要注意的事项
  2. redis的安全性及客户端工具的使用
  3. 2.Redis数据库（搭建redis主从的必要性）以及主从搭建（Windows为例）
  4. wxWidgets：源代码概览
  5. boost::mp11::mp_similar相关用法的测试程序
  6. boost::mp11::mp_nth_element相关用法的测试程序
  7. boost::endian模块实现conversion的测试程序
  8. Boost：bind绑定的测试自定义占位符
  9. VTK：可视化之FontFile
  10. VTK：直线网格之RectilinearGridToTetr​​ahedra