CKeditor 4.x Toolbar Buttons Configuration
Posted: Fri Dec 30, 2016 12:03 am
Opencart 2. x: CKeditor 4.x Toolbar Buttons Configuration
I have been using Opencart since 2011 and CKeditor for years. I just bought an extension for 10USD for CKeditor 4.6.1. In OC I disabled a setting called Enhanced Mode. I ended up with these settings for /admin/view/javascript/ckeditor/config.js
In config.js you specify different things to override the default setting. Regarding the toolbar/buttons you can specify either
1) items (buttons) OR 2) Groups but noth both.
The following two examples are just, what I ended with. I do not need many buttons. I use shortcut keys like Ctrl+I (italic), Ctrl+B (bold), Ctrl+U (underscore) and Ctrl+L for link. Unfortunately you can NOT use both definitions item and group at the same time.
1) Example using item by item method
2) Example using Group method
List of ITEM names to use. I am not sure but I think that each text within "" is a group. And I have not tested the group names 
Group Document: "Source, Save, NewPage, DocProps, Preview, Print, Templates, document"
Group Clipboard: "Cut, Copy, Paste, PasteText, PasteFromWord, Undo, Redo"
"Find, Replace, SelectAll, Scayt"
"Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField"
Group "Bold, Italic, Underline, Strike, Subscript, Superscript, RemoveFormat"
Group List: "NumberedList, BulletedList"
Group Indent: "Outdent, Indent"
"Blockquote, CreateDiv, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock, BidiLtr, BidiRtl"
Group Link: "Link, Unlink, Anchor"
Group Insert: "CreatePlaceholder, Image, Flash, Table, HorizontalRule, Smiley, SpecialChar, PageBreak, Iframe, InsertPre"
Group: Styles: "Styles, Format, Font, FontSize"
Group Color: "TextColor, BGColor"
"UIColor, Maximize, ShowBlocks"
"button1, button2, button3, oembed, MediaEmbed"
"About"
More info on docs.ckeditor.com
PS. Also see my 5 years with Opencart. Long article incl. video, where I share my modifications, extensions and themes.
I have been using Opencart since 2011 and CKeditor for years. I just bought an extension for 10USD for CKeditor 4.6.1. In OC I disabled a setting called Enhanced Mode. I ended up with these settings for /admin/view/javascript/ckeditor/config.js
In config.js you specify different things to override the default setting. Regarding the toolbar/buttons you can specify either
1) items (buttons) OR 2) Groups but noth both.
The following two examples are just, what I ended with. I do not need many buttons. I use shortcut keys like Ctrl+I (italic), Ctrl+B (bold), Ctrl+U (underscore) and Ctrl+L for link. Unfortunately you can NOT use both definitions item and group at the same time.
1) Example using item by item method
Code: Select all
CKEDITOR.editorConfig = function( config ) {
config.toolbar = [
['Source','Format','NumberedList','BulletedList','Maximize','Removeformat','Indent','Outdent','Blockquote','JustifyCenter','JustifyRight','Smiley','TextColor','Link' ],
];
//download http://ckeditor.com/addon/enterkey and follow instructions
//Enter makes line break and Shift+Enter makes paragraph
config.extraPlugins = 'enterkey';
config.enterMode = CKEDITOR.ENTER_BR;
config.extraPlugins = 'sourcedialog';
//keep html code in source view
CKEDITOR.config.allowedContent = true;
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
// try these if you have problems
config.htmlEncodeOutput = false;
config.entities = false;
config.basicEntities = false;
config.entities_greek = false;
config.entities_latin = false;
config.allowedContent = true;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
CKEDITOR.dtd.$removeEmpty = false;
CKEDITOR.config.contentsCss = 'view/javascript/ckeditor/default-font.css';
config.extraPlugins = 'codemirror';
};
Code: Select all
CKEDITOR.editorConfig = function( config ) {
// allows and keeps html code in Source Mode
CKEDITOR.config.allowedContent = true;
//this way specify each single Group (containing several buttons/items)
config.toolbarGroups = [
{ groups: [ 'styles','list', 'indent', 'align', 'colors', 'tools', 'mode'] },
];
//download http://ckeditor.com/addon/enterkey and follow instructions
//Enter makes line break and Shift+Enter makes paragraph
config.extraPlugins = 'enterkey';
config.enterMode = CKEDITOR.ENTER_BR;
config.extraPlugins = 'sourcedialog';
// Dialog windows are also simplified.
config.removeDialogTabs = 'link:advanced';
};
// try these if you have problems
config.htmlEncodeOutput = false;
config.entities = false;
config.basicEntities = false;
config.entities_greek = false;
config.entities_latin = false;
config.allowedContent = true;
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;
CKEDITOR.dtd.$removeEmpty = false;
CKEDITOR.config.contentsCss = 'view/javascript/ckeditor/default-font.css';
config.extraPlugins = 'codemirror';
};
Group Document: "Source, Save, NewPage, DocProps, Preview, Print, Templates, document"
Group Clipboard: "Cut, Copy, Paste, PasteText, PasteFromWord, Undo, Redo"
"Find, Replace, SelectAll, Scayt"
"Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField"
Group "Bold, Italic, Underline, Strike, Subscript, Superscript, RemoveFormat"
Group List: "NumberedList, BulletedList"
Group Indent: "Outdent, Indent"
"Blockquote, CreateDiv, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock, BidiLtr, BidiRtl"
Group Link: "Link, Unlink, Anchor"
Group Insert: "CreatePlaceholder, Image, Flash, Table, HorizontalRule, Smiley, SpecialChar, PageBreak, Iframe, InsertPre"
Group: Styles: "Styles, Format, Font, FontSize"
Group Color: "TextColor, BGColor"
"UIColor, Maximize, ShowBlocks"
"button1, button2, button3, oembed, MediaEmbed"
"About"
More info on docs.ckeditor.com
PS. Also see my 5 years with Opencart. Long article incl. video, where I share my modifications, extensions and themes.