JSP頁面使用富文本控制項ckeditor自訂樣式__JSP

 

ckeditor環境搭建 ，請參考  JSP中使用CKEditor3.6入門教程
JSP頁面使用富文本控制項ckeditor提交表單資料

JSP使用ckeditor和ckfinder實現富文本及上傳功能

找到ckeditor目錄下的ckeditor.js，修改其中的內容，向裡面添加自己的設定

CKEDITOR.editorConfig = function( config ){// Define changes to default configuration here. For example://config.language = 'fr'; //設定語言風格   fr法語config.uiColor = '#AADC6E';//修改邊框顏色         //設定寬高config.width = 700;config.height = 200;config.toolbar = 'MyToolbar';  //config.toolbar = 'Full';  //config.toolbar = 'Basic';  config.toolbar_Full =   [   ['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','CreateDiv'],   ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],   ['BidiLtr', 'BidiRtl'],   ['Link','Unlink','Anchor'],   ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],   '/',   ['Styles','Format','Font','FontSize'],   ['TextColor','BGColor'],   ['Maximize', 'ShowBlocks','-','About']   ];   config.toolbar_Basic =   [   ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']   ]; config.toolbar_MyToolbar =   [           ['NewPage','Preview'],           ['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']   ];   };

效果圖如下：