Custom CKeditor cho Opencart

Trình soạn thảo mặc định của Opencart để rất ít chức năng khiến bạn khó khăn khi soạn thảo nội dung bài viết hay các mô tả khác. Việc soạn thảo không tốt ảnh hưởng đến thẩm mỹ của bài viết và khó khăn trong SEO. Hôm nay mình hướng dẫn các bạn thêm các tính năng vào bộ soạn thảo này. Thực chất là tùy chỉnh cấu hình của CKEditor thôi.
Các bạn tìm file config của CKEditor trong admin: admin/view/javascript/ckeditor/config.js. Nội dung file này như sau:
[js]
/**
* @license Copyright (c) 2003-2012, 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 the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.filebrowserWindowWidth = ‘800’;
config.filebrowserWindowHeight = ‘500’;
config.resize_enabled = false;
config.htmlEncodeOutput = false;
config.entities = false;
config.extraPlugins = ‘codemirror’;
config.codemirror_theme = ‘rubyblue’;
config.toolbar = ‘Custom’;

config.toolbar_Custom = [
[‘Source’],
[‘Maximize’],
[‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘SpecialChar’],
‘/’,
[‘Undo’,’Redo’],
[‘Font’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Table’,’HorizontalRule’]
];
};
[/js]
Muốn thêm button nào vào bạn chỉ cần thêm vào trong config.toolbar_Custom. Ví dụ mình muốn thêm chức năng PasteText,PasteFromWord mình thêm [‘PasteText’,’PasteFromWord’] vào sau dòng:
[js]
config.toolbar_Custom = [
[‘Source’],
[/js]
Thành:
[js]
config.toolbar_Custom = [
[‘Source’],
[‘PasteText’,’PasteFromWord’],
[/js]
Muốn thêm định dạng h1, h2, h3,…,h6 các bạn thêm [‘Styles’,’Format’], vào
[js]
config.toolbar_Custom = [
[‘Source’],
[‘PasteText’,’PasteFromWord’],
[‘Styles’,’Format’],
[/js]

Dưới đây là config full của toolbar (không có các plugins cài thêm nhé) các bạn có thể thêm chức năng nào vào tùy bạn chọn
[js]
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’,’Iframe’ ] },
‘/’,
{ name: ‘styles’, items : [ ‘Styles’,’Format’,’Font’,’FontSize’ ] },
{ name: ‘colors’, items : [ ‘TextColor’,’BGColor’ ] },
{ name: ‘tools’, items : [ ‘Maximize’, ‘ShowBlocks’,’-‘,’About’ ] }
];
[/js]
File config sau khi tùy chỉnh của mình
[js]
/**
* @license Copyright (c) 2003-2012, 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 the complete reference:
// http://docs.ckeditor.com/#!/api/CKEDITOR.config
config.filebrowserWindowWidth = ‘800’;
config.filebrowserWindowHeight = ‘500’;
config.resize_enabled = false;
config.htmlEncodeOutput = false;
config.entities = false;
config.extraPlugins = ‘codemirror’;
config.codemirror_theme = ‘rubyblue’;
config.toolbar = ‘Custom’;

config.toolbar_Custom = [
[‘Source’],
[‘Maximize’],
[‘PasteText’,’PasteFromWord’],
[‘Styles’,’Format’],
[‘Bold’,’Italic’,’Underline’,’Strike’,’-‘,’Subscript’,’Superscript’],
[‘NumberedList’,’BulletedList’,’-‘,’Outdent’,’Indent’],
[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],
[‘SpecialChar’],
‘/’,
[‘Undo’,’Redo’],
[‘Font’,’FontSize’],
[‘TextColor’,’BGColor’],
[‘Link’,’Unlink’,’Anchor’],
[‘Image’,’Table’,’HorizontalRule’]
];
};
[/js]