关于CKEditor4 5 6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
关于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){
给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow
|