Jak dostosować menu narzędzi edytora CK?

Question

Chciałbym zmienić optykę menu narzędzi na edytorze ck. na przykład usuwam niektóre z nich, których nie potrzebuję używać. Jak mogę to zrobić?

Answer 1

Istnieje konfiguracja, która pozwala ustawić, które przyciski będą się pojawiać.

Po prostu utwórz własny układ paska narzędzi. Dodałem domyślny pełny kod paska narzędzi, możesz usunąć przyciski, których nie chcesz wyświetlać.

Najlepiej skopiować plik domyślne config.js i zmienić jego nazwę, a następnie połączyć się niestandardowy plik konfiguracyjny oraz niestandardowy pasek narzędzi podczas ładowania edytora:

CKEDITOR.replace('xxx_textarea_id_xxx', 
{ 
    customConfig : 'xxx_name_of_custom_config_file_xxx.js', 
    toolbar : 'XXX_custom_name_XXX' 
}); 

---

To ustawienie config dla domyślnego pełnego układu paska narzędzi.

'/' w układzie paska narzędzi oznacza podział na nowy wiersz.
Każdy z wpisów name: 'document', items : jest wyświetlany jako grupa, a pomiędzy nimi znajdują się spacje.
Urządzenie '-' tworzy pionowy element dystansowy w grupie.

Strona demo pokazuje przykład tej domyślny układ paska narzędzi:
CKEditor Demo

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' ] } 
]; 

---

To ustawienie niestandardowy pasek narzędzi config.
Po ustawieniu opcji konfiguracji paska narzędzi używa się tylko części nazwy, która znajduje się za "paskiem narzędzi". toolbar : 'XXX_custom_name_XXX'

config.toolbar_XXX_custom_name_XXX = 
[ 
    { name: 'xxx_custom_group_namexxx', items : ['Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, 
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
    { name: 'editing',  items : [ 'Find','Replace','-','SelectAll' ] }, 
    '/', 
    { 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','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] }, 
    '/', 
    { name: 'styles',  items : [ 'Styles','Format','Font','FontSize' ] }, 
    { name: 'colors',  items : [ 'TextColor','BGColor' ] }, 
    { name: 'tools',  items : [ 'Maximize', 'ShowBlocks','-','About' ] } 
]; 

---

Oto link do strony, na pasku narzędzi w przewodniku deweloperów:
CKEditor 3.x | Developers Guide - CKEditor Toolbar

---

Możesz chcieć wyłączyć wszystkie funkcje, które nie korzystają z removePlugins ustawienie konfiguracji:

config.removePlugins = 'flash,iframe'; 

---

Oto strona z CKEditor 3 JavaScriptu Dokumentacja API, który zawiera listę wszystkich ustawień konfiguracyjnych:
Namespace CKEDITOR.config