自定义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资源，个人收藏总结！