2011-11-10 124 views
5

我正在使用ckeditor並且想要自定義工具欄和文本輸入區域,因爲兩個句子之間的差距很大。 我無法找到我應該做的變化toolbar.js或config.js ..如何自定義ckeditor的工具欄

如何自定義兩個

+0

您應該查看CKEditor頁面,請參閱http://docs.cksource.com/CKEditor_3.x/Developers_Guide – hakre

+0

您是否檢查了[ckeditor文檔](http://docs.cksource.com/zh-cn/)。 COM /)?你能提供一個你有什麼和你想要的圖像嗎? – SliverNinja

回答

36

SONAL的回答上面是沒有錯的本身,而是沒有按」 T轉到CKEDITOR。FCKeditor是一個很好的產品,但它現在已被新的CKEditor所取代,因此使用這些配置可能並不適用。

正如你可以在docs here閱讀,可以通過編輯config.js文件,該文件位於CKEDITOR的根文件夾(在新鮮installation..if您移動它採取相應的行動)

傳遞自定義配置選項

該文件已經包含這些行:

CKEDITOR.editorConfig = function(config) 
{ 
     // Define changes to default configuration here. For example: 
    // config.language = 'fr'; 
    // config.uiColor = '#AADC6E'; 
}; 

您可以發現在他們API DOCS可用配置的完整列表。來到你的問題,你可以設置你想/不想在你的工具欄這樣的東西(檢查toolbar§):

// This is actually the default value. 
config.toolbar_Full = 
[ 
    { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, 
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
    { name: 'editing',  items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] }, 
    { name: 'forms',  items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, 
    '/', 
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
    { name: 'links',  items : [ 'Link','Unlink','Anchor' ] }, 
    { name: 'insert',  items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] }, 
    '/', 
    { name: 'styles',  items : [ 'Styles','Format','Font','FontSize' ] }, 
    { name: 'colors',  items : [ 'TextColor','BGColor' ] }, 
    { name: 'tools',  items : [ 'Maximize', 'ShowBlocks','-','About' ] } 
]; 

至於是高線,我不知道你是否想要在呈現模式下更改,或者想要更改在每個換行符處標記<p>標記的默認行爲。 在後一種情況下,使用

config.enterMode = CKEDITOR.ENTER_BR; 

你可以找到一個詳細的解釋here (EnterMode §)

如果你願意,你也可以通過在運行時定製CONFIGS使用:

CKEDITOR.replace('#textarea_id', { customConfig : '/myconfig.js' }); 

或者這個(用來代替你的默認設置)

CKEDITOR.replace('#textarea_id', { customConfig : '' }); 
+0

好吧已經算出來了,它的工作... thanx every1 .. – user1019706

+6

如果這個答案有幫助並且解決了你的問題,請考慮將它投票和/或標記爲已接受,以備將來參考。如果你仍然有問題,請問:)乾杯! –

5
<script type="text/javascript"> 
    $(document).ready(function(){ 
     CKEDITOR.replace(
      'textarea_name', 
      { 
       toolbar: [ 
        ['Image','Flash'] 
       ], 
      }, 
      {height: 550},{width:500} 
     ); 
    }); 
</script>