Selamat pagi, kali ini admin akan share bagaimana cara posting data dengan CKEDITOR. Tutorial ini masih tergolong untuk pemula dalam pemrograman web.
Persiapan :
- Download library CKEDITOR
- Buat tag textarea
- Javascript code yang sudah disediakan oleh library editornya
Siapkan tag HTML untuk textarea seperti berikut, beberapa library menggunakan tag div dengan penambahan atribut ID atau class
sisipkan kode berikut pada script javascript anda
CKEDITOR.addCss('.cke_editable { font-size: 15px; padding: 2em; }');
CKEDITOR.config.characterscounter_autocount = true;
CKEDITOR.replace('content');Atau pada config.js yg disediakan di library CKEDITOR
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here.
// For complete reference see:
// https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
// The toolbar groups arrangement, optimized for two toolbar rows.
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 are
// 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';
// Simplify the dialog windows.
config.removeDialogTabs = 'image:advanced;link:advanced';
config.height = 500;
};Jika menggunakan ajax/jquery wajib gunakan script instance berikut, supaya output text sesuai dengan yg di input.
// $("#FormIDselector").submit(function(e) {
// e.preventDefault();
// var form = $(this);
for (instance in CKEDITOR.instances)
{
CKEDITOR.instances[instance].updateElement();
}
// $.ajax({
// Code here
// });
// });Untuk tangkapan submitnya bisa gunakan $_POST[‘content’]
Kalo kita perhatikan berbagai CMS, pasti ada form untuk posting seperti blogspot atau wordpress. Sebenernya masih banyak selain CKEDITOR sebagai sarana untuk posting html text editor.
Nah, apa itu Web Text Editor?
Web Text editor adalah sebuat tools yang bisa digunakan oleh programmer untuk menulis atau posting berupa text dengan skala banyak.
Dalam implementasinya, beberapa Web editor ini ada yang mudah digunakan dan sementara beberapa Web editor lainnya hanya menyediakan lebih banyak fungsionalitas saja.
Ada dua jenis editor yang tersedia, WYSIWYG dan editor Web tekstual. Apa Perbedaannya?
WYSIWYG singkatan dari “What You See Is What You Get”. Editor ini menyediakan antarmuka pengeditan yang menunjukkan bagaimana kode terlihat pada halaman web. Menggunakan editor WYSIWYG tidak membutuhkan pengetahuan HTML apa pun, berbeda dengan editor tetstual yang harus punya kemampuan mengetahui tag-tag dasar HTML.
Berikut ada beberapa library WYSIWYG yang bisa digunakan:
Web editor diatas hanya sebagian kecil yang bisa dirangkum oleh admin, masih banyak web text editor yang mumpuni yang bisa kalian gunakan.
Sekian info Barbar kali ini, Trims. 🙂
Author Profile
- Hi my name is Ricki, I am a blogger from Indonesia. Founder of erkamoo.com, Besides creating Web Applications, I also write about Blogging Tips and Tutorials on Programming, Databases, HTML.
