自訂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資源，個人收藏總結。