Post by michael2820 » 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
Image

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';
};
2) Example using Group method
Image

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

};
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.

--- please reply only with verified data, that is: no 'I think', 'maybe' etc. ---


User avatar
Active Member

Posts

Joined
Sun May 15, 2011 8:16 pm
Location - Denmark ver. 2.1.0.2
Who is online

Users browsing this forum: No registered users and 8 guests