Zum Hauptinhalt springen

Die CKEditor Toolbar anpassen

Alexander Fischer
21. September 2014

Hier finden sich ein paar Hinweise wie die Toolbar des CKEditors individuell angepasst werden kann.

Die Datei die für die Einstellungen der Toolbar verantwortlich ist bzw. welche bearbeitet werden muss ist die config.js im Hauptverzeichnis des Editors. 

Meistens ist die Datei mit folgendem Inhalt befüllt:

/**
 * @license Copyright (c) 2003-2013, 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';
};

In den meisten Fällen möchte man aus dem Editor einige nicht benötigte Funktionen entfernen hierzu wird die config.js des CKEditors um folgenden Befehl erweitert: "config.removeButtons".

Das Ergebnis könnte dann wie folgt aussehen: 

/**
 * @license Copyright (c) 2003-2013, 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.removeButtons = 'TextColor,BGColor,Styles,Copy,Iframe,Flash,Smiley,PageBreak,Font,FontSize,Save,Print,NewPage,Preview,Templates,';
};

Toolbarbuttons im CKEditor

Die einzelnen Bestandteile der Toolbar sind folgende:

  1. "Source" = Ermöglicht die Anzeige des Quellcodes
  2. "Save" = der Sichern Button 
  3. "NewPage" = Einfügen einer neuen Seite
  4. "DocProps"
  5. "Preview" = Öffnet die Vorschau
  6. "Print" = ermöglicht das Ausdrucken des Textes
  7. "Templates" = Öffnet die Vorlagen
  8. "document"
  9. "Cut"
  10. "Copy"
  11. "Paste"
  12. "PasteText"
  13. "PasteFromWord"
  14. "Undo"
  15. "Redo"
  16. "Find"
  17. "Replace"
  18. "SelectAll"
  19. "Scayt"
  20. "Form"
  21. "Checkbox"
  22. "Radio"
  23. "TextField"
  24. "Textarea"
  25. "Select"
  26. "Button"
  27. "ImageButton"
  28. "HiddenField"
  29. "Bold"
  30. "Italic"
  31. "Underline"
  32. "Strike"
  33. "Subscript"
  34. "Superscript"
  35. "RemoveFormat"
  36. "NumberedList"
  37. "BulletedList"
  38. "Outdent"
  39. "Indent"
  40. "Blockquote"
  41. "CreateDiv"
  42. "JustifyLeft"
  43. "JustifyCenter"
  44. "JustifyRight"
  45. "JustifyBlock"
  46. "BidiLtr"
  47. "BidiRtl"
  48. "Link"
  49. "Unlink"
  50. "Anchor"
  51. "CreatePlaceholder"
  52. "Image"
  53. "Flash"
  54. "Table"
  55. "HorizontalRule"
  56. "Smiley"
  57. "SpecialChar"
  58. "PageBreak"
  59. "Iframe"
  60. "InsertPre"
  61. "Styles"
  62. "Format"
  63. "Font"
  64. "FontSize"
  65. "TextColor"
  66. "BGColor"
  67. "UIColor"
  68. "Maximize" = Ein Klick auf diesen Button maximiert den Editor im Browserfenster
  69. "ShowBlocks"
  70. "button1"
  71. "button2"
  72. "button3"
  73. "oembed"
  74. "MediaEmbed"
  75. "About" = das kleine Fragezeichen das mit einem Klick Infos zum Editor Preis gibt

Weitere Fragen zum Thema CKEditor Toolbar anpassen?

Wenn Sie noch weitere Fragen haben oder eine Beratung wünschen, können Sie gern meine Hilfe in Anspruch nehmen. Rufen Sie mich einfach unter: +49-(0)-5523-952 89 98 an, schreiben eine E-Mail an Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein. oder nutzen Sie das Kontaktformular.

Neuste Beiträge