Custom CKeditor cho Opencart

Tùy chỉnh CKEditor 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:

/**
 * @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']
	];
};

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:

	config.toolbar_Custom = [
		['Source'],

Thành:

	config.toolbar_Custom = [
		['Source'],
                ['PasteText','PasteFromWord'],

Muốn thêm định dạng h1, h2, h3,…,h6 các bạn thêm [‘Styles’,’Format’], vào

	config.toolbar_Custom = [
		['Source'],
                ['PasteText','PasteFromWord'],
                ['Styles','Format'],

Tùy chỉnh CKEditor Opencart
Tùy chỉnh CKEditor Opencart

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

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

File config sau khi tùy chỉnh của mình

/**
 * @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']
	];
};

Tác giả: admin

Đơn giản là mình là người đam mê công nghệ, thích học hỏi và chia sẻ. Mình mong muốn nhận được phản hồi của các bạn khi xem bất kỳ bài viết nào trên blog của mình. Mỗi ý kiến đóng góp, mỗi sự sẻ chia và góp ý của các bạn là điều mình cần nhất để blog hoàn thiện hơn. Điều đó thật sự quan trọng đối với mình. Xin chân thành cảm ơn!