自定义ckeditor编辑器的工具样式

IT程序员开发必备-各类资源下载清单，史上最全IT资源，个人收藏总结！
//字体. config.font_names = ‘宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;’ ; //工具按钮. config.toolbar= [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print','SpellChecker','Scayt'], ['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','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar', 'PageBreak'], ‘/’, ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize','ShowBlocks','-','About'] ]; //宽度 config.width = 500; //高度 config.height = 400; //皮肤 config.skin=’v2′; //等等… … [/css] 

1.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码

/*Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or http://ckeditor.com/license*/CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';//下面的是自己写的        config.language = 'zh-cn'; // 配置语言       config.uiColor = '#FFF'; // 背景颜色       config.width = 'auto'; // 宽度       config.height = '300px'; // 高度       config.skin = 'office2003';// 界面v2,kama,office2003       config.toolbar = 'MyToolbar';// 工具栏风格（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js       config.toolbarCanCollapse = false;// 工具栏是否可以被收缩       config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js              //自定义的工具栏           config.toolbar_MyToolbar =       [           ['Source','-','Save','Preview','Print'],           ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],           ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],           ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],           '/',           ['Styles','Format'],           ['Bold','Italic','Strike'],           ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],           ['Link','Unlink','Anchor'],           ['Maximize','-','About']       ];   };

2.在jsp页面中定义某个ckeditor的样式

演示<ck:editor>的标签的作用 <br>    <%    Map<String, String> attr = new HashMap<String, String>();attr.put("rows", "8");attr.put("cols", "50");request.setAttribute("attr",attr);   CKEditorConfig settings = new CKEditorConfig();      settings.addConfigValue("width","200");      settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]");      request.setAttribute("settings",settings);%>     <!-- 这里basePath和editor是必选项，其中          editor   : is the name of the internal textarea element.           basePath : contains the path to the main CKEditor directory.        -->    <ck:editor editor="editor1" config="<%=settings%>"  textareaAttributes="${attr}" basePath="${pageContext.request.contextPath}/ckeditor/" value="please input content here!"></ck:editor>    <ck:editor editor="editor2"   textareaAttributes="${attr}" basePath="${pageContext.request.contextPath}/ckeditor/" value="please input content here!"></ck:editor>    <input type="button" value="editor2" onclick="getData()" >

IT程序员开发必备-各类资源下载清单，史上最全IT资源，个人收藏总结！