Widodo

Cara Custom Toolbar pada CKEDITOR

Cara Custom toolbar ckeditor

Assalamualaikum Wr. Wb

ketemu lagi sama s-widodo.com, untuk hari ini kita akan meneruskan tutorial yang pernah kita buat sebelumnya yaitu cara memasang CKEDITOR pada web kita, dalam tutorial ini kita akan membahas cara custom toolbar pada CKEDITOR dan anda bisa memilih menurut kalian apa saja yang penting untuk menampilkan toolbar-toolbar dalam ckeditor, sebenarnya anda bisa custom langsung dari website ckeditor sebelum mendownload tapi s-widodo.com akan memberi tutorial untuk mengcustom toolbar secara manual.

untuk itu langsung aja kita pelajari.

1. Sebelumnya anda sudah mendownload CKEDITOR versi terbaru yang full
2. Setelah di download silahkan extract CKEDITORnya
3. Setelah itu silahkan anda buka file config.js pada folder CKEDITOR dan anda akan menemukan Code seperti dibawah ini

Custom toolbar CKEDITOR

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};

Atau seperti Ini

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
/////////
];
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';
// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';
config.removeDialogTabs = 'image:advanced;link:advanced';
};

code diatas inilah yang akan kita rubah untuk menentukan toolbar CKEDITOR yang akan kita tampilkan

4. Sekarang anda bisa menyisipkan code dibawah ini di dalam code config.toolbarGroups = [ maka keseluruhan code akan seperti ini

config.toolbarGroups = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'forms' },
{ name: 'tools' },
{ name: 'document',	groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'about' }
];

// Remove some buttons, provided by the standard plugins, which we don't
// need to have in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript';

// Se the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';

// Make dialogs simpler.
config.removeDialogTabs = 'image:advanced;link:advanced';
};

Dalam code diatas itu akan menampilkan keseluruhan toolbar yang ada pada CKEDITOR anda cukup menghapus bagian-bagian yang tidak akan di tampilkan antara buka kurawa sampai tutup kurawa atau bisa mengcustom di dalalam group contoh di bawah ini:

CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'styles' },
{ name: 'colors' },
{ name: 'basicstyles', groups: [ 'basicstyles' ] },
{ name: 'paragraph', groups: [ 'list' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'sourcearea', groups: [ 'mode', 'resize' ] }

];
config.removeButtons = 'Underline,Subscript,Superscript';

// Set the most common block elements.
config.format_tags = 'p;h1;h2;h3;pre';

// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
};

Selesai..

Semoga tutorial yang kami berikan ini sangat bermanfaat jika ada kata atau  tulisan yang salah kami mohom maaf.

 



0 Komentar