Cara Pasang Ckeditor di codeigniter 4
Kali ini admin akan berbagi bagaimana cara memasang ckeditor di codeigniter 4, CKEDITOR merupakan sebuah teks editor yang sering digunakan dalam form aplikasi berbasis web, terutama pada form pembuatan berita maupun pembuatan artikel.
What you see is what you get (WYSIWYG) merupakan istilah untuk menggambarkan jawaban dari texteditor CKEDITOR. Dengan menggunakan text editor ini membuat kita menjadi mudah dalam menulis sebuah berita maupun artikel, karena kita tidak perlu menghafalkan/menuliskan sebuah kode HTML jika kita ingin membuat tabel, huruf tebal, huruf miring dan lain sebagainya.
Install Ckeditor
Cara menginstall ckeditor ada dua cara yaitu melalui terminal maupun mendownloadnya melalui situs resminya
Jika kita ingin menginstalnya melalui composer dengan npm package
npm install ckeditor4 Installasi secara manual kita bisa download di situs resmi ckeditor https://ckeditor.com/ckeditor-4/download/
Memasanag Ckeditor di Codeigniter 4
Cara memasang ckeditor di codeigniter 4 cukup mudah dan singkat silahkan ikuti langkah-langkah beirikut ini :
Membuat Controller
Kita buat file baru di controller dengan nama Blog.php simpan di folder app/controller di kemudian ketikan kode berikut ini :
<?php namespace App\Controllers;
class Blog extends BaseController
{
public function index()
{
return view('view_blog');
}
} Membuat View
Buat file baru dengan nama view_blog.php simpan di folder app/view kemudian tambahkan kode berikut ini :
<script src="<?=base_url('node_modules/ckeditor4/ckeditor.js');?>"></script>Kode diatas digunakan untuk konfigurasi ke ckeditor kita yang sudah kita simpan di folder "public/node_modules/ckeditor4/" kemudian lengkapi untuk membuat form inputanya masukan kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cara Memasang CKEDITOR di codeigniter 4</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<script src="<?=base_url('node_modules/ckeditor4/ckeditor.js');?>"></script>
</head>
<body style="width: 70%; margin: 0 auto; padding-top: 30px;">
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Cara Memasang CKEDITOR di codeigniter 4 </h2>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-md-12">
<label>Judul</label>
<div class="form-group">
<input type="text" name="judul" class="form-control">
</div>
</div>
<div class="col-md-12">
<label>ISI BLOG</label>
<div class="form-group">
<textarea name="editor1" id="editor1"></textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor 4
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</div>
</div>
<div class="col-md-12">
<label>Photo</label>
<div class="form-group">
<input type="file" name="file_upload" class="form-control">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button class="btn btn-primary">Simpan</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Pada kode diatas terdapat kode seperti dibahw ini :
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>Maksud dari kode diatas adalah bahwa Ckeditor telah digabungkan pada textearea, jika berhasil maka tampilannya akan menjadi seperti ini :
Sekian tutorial yang bisa admin bahas kali ini semoga bermanfaat.
Bang, kenapa =base_url('node_modules/ckeditor4/ckeditor.js')
ReplyDeleteMalah not found ya ?
masih error?
Delete