CKEditor группы кнопок

14 Июля 2019 03:35 (Редактировано: 29 Июля 2020 17:21)

Схема групп кнопок для быстрой настройки под себя. Это стандартная схема, которая содержит все стандартные кнопки. Смысл в том, что все кнопки делятся на группы которым соответствуют определенные кнопки, и если мы хотим убирать/добавлять кнопки то сначала прописываем название группы, а затем кнопку в подмассиве. Символ «/»  — это разделители строк т.е. указанная группа кнопок, после этого символа, будет начинаться с новой строки.

[
    { "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" ] }
]

Пример

 

 

 

Для такого расположения используется следующий набор параметров:

[
    { "name": "document", "items" : ["Source"] },
    { "name": "tools", "items" : ["Maximize"] },
"/",
    { "name": "basicstyles", "items" : [ "Bold","Italic","Underline","Strike","Subscript","Superscript"] },
    { "name": "colors", "items" : [ "TextColor","BGColor" ] },
    { "name": "paragraph", "items" : [ "NumberedList","BulletedList","JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"] },
    { "name": "insert", "items" : [ "Image","Oembed","Table"] },
    { "name": "styles", "items" : [ "Format","Font","FontSize" ] }
]

Обращаю внимание, что на вставку некоторых кнопок из дополнительных плагинов необходимо проверить их принадлежность к группе и точное название кнопки. Можно зайти в файл plugin.js необходимого плагина и по ключевым словам "addButton" найти название кнопки. Хотя, принято названия давать CamelCase'ом по типу CodeSnippet или JustifyLeft, но не всегда это применяется.

Также, можно воспользоваться конфигуратором на официальном сайте CKEditor

Важным моментом является то, что многие очевидные кнопки, типа цвета текста и т.д. являются отдельными плагинами и если вдруг оказалось, что они не отображаются на панели, но в конфиге они прописаны то можно закомментить конфиг и, таким образом, выгрузятся все кнопки и, вполне вероятно, что там необходимой кнопки не будет. В таком случае, идем на офф. сайт в раздел плагинов и ищем название похожее на то, что нам нужно, например, colorbutton и пр.