Di sini saya memakai text editor WYSIWYG dengan summernote, sebenarya masih ada banyak text editor yang lain seolah-olah CKeditor, Redactor, TinyMCE dan lain-lain
 |
| Summernote CodeIgniter 3 |
Okeh langsung saja, Tutorial Cara memakai summnernote di CodeIgniter :
Silahkan download dulu plugin summernotenya free, dan CodeIgniter, owh yah .. di aku juga memakai Bootstrap sebagai Frond-end nya.
- Summernote
- CodeIgniter
- Bootstrap (saya pakai V3, dulu)..
- Database Mysql
Silahkan lakukan konfigurasi CodeIgniter seolah-olah route, database dan lain-lain, untuk database aku sudah sudah siapkan di link dibawah.
berikut file coding tuk view ada dua yaitu file vsummer.php dan vnews.php,
tak jadiiin satu semua file css supaya simple ^_^..
vsummer.php
<!doctype html>
<html lang="en">
<head>
<title><?php echo $title;?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<?php echo base_url();?>asset/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="<?php echo base_url();?>asset/summernote/summernote.css" />
<noscript>
<style>htmldisplay:none;</style>
Sorry, your browser does not support JavaScript!
</noscript>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h3><?php echo $title;?></h3><hr/>
<?php echo form_open('home/datasummernote', 'id="mydata" '); ?>
<input type="hidden" name="id" value="<?php echo (rand(1,1000));?>">
<div class="form-group">
<label for="usr">Ttitle :</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" cols="9" id="editordata" name="editordata"></textarea>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
</div>
<div class="col-sm-6">
<h3>Data</h3><hr/>
<div class="table-responsive">
<table id="datanote" class="table table-bordered table-striped">
<thead>
<tr>
<th>id</th>
<th>Title</th>
<th>View</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<br><br><br>
</div>
<!-- Javascripts-->
<script src="<?php echo base_url();?>asset/jquery.min.js"></script>
<script src="<?php echo base_url();?>asset/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/summernote/summernote.js"></script>
<script type="text/javascript">
//datatable
var dataTable = $('#datanote').DataTable(
"serverSide":true,
"order":[],
"ajax":
url:"<?php echo base_url();?>summer/datanote",
type:"POST"
,
"columnDefs":[
"targets":[0, 1],
"orderable":true,
,
],
);
//edtor summernote
$('#editordata').summernote(
height: 200,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['insert',['picture']]
],
//set callback image tuk upload ke serverside
callbacks:
onImageUpload: function(files)
uploadFile(files[0]);
);
function uploadFile(file)
data = new FormData();
data.append("file", file);
$.ajax(
data: data,
type: "POST",
url: "<?php echo base_url();?>summer/saveGambar",
cache: false,
contentType: false,
processData: false,
success: function(url)
console.log(url);
$('#editordata').summernote("insertImage", url);
);
//input form
$('#mydata').submit(function(e)
e.preventDefault();
var fa = $(this);
$.ajax(
url: fa.attr('action'),
type: 'post' ,
data: fa.serialize(),
dataType: 'json',
success: function(response)
if(response.success == true)
$('.form-group').removeClass('is-invalid')
.removeClass('is-valid');
$('.text-danger').remove();
fa[0].reset();
location.reload();
else
$.each(response.messages,function(key, value)
var element = $('#' + key);
element.closest('div.form-group')
.removeClass('is-invalid')
.addClass(value.length > 0 ? 'is-invalid' : 'is-valid')
.find('.text-danger')
.remove();
element.after(value);
);
);
);
</script>
</body>
</html>
vnews.php
<!doctype html>
<html lang="en">
<head>
<title><?php echo $title;?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="<?php echo base_url();?>asset/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="<?php echo base_url();?>asset/summernote/summernote.css" />
<noscript>
<style>htmldisplay:none;</style>
Sorry, your browser does not support JavaScript!
</noscript>
</head>
<body>
<div class="container">
<div class="page-header"><strong><?php echo $judul;?></strong></div>
<div class="card card-body">
<?php echo $editor;?>
</div>
</div>
<!-- Javascripts-->
<script src="<?php echo base_url();?>asset/jquery.min.js"></script>
<script src="<?php echo base_url();?>asset/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>asset/datatable/dataTables.bootstrap.min.js"></script>
<script src="<?php echo base_url();?>asset/summernote/summernote.js"></script>
</body>
</html>
untuk Controller aku buat Summer.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Summer extends CI_Controller
function __construct()
parent::__construct();
$this->load->model('mdata', '', TRUE);
$this->load->helper(array('form', 'url', 'file'));
public function index()
$data['title'] = "WYSIWYG text editor summernote";
$this->load->view('vsummer',$data);
public function saveGambar()
if(isset($_FILES["file"]["name"]))
gif';
$this->load->library('upload', $config);
if(!$this->upload->do_upload('file'))
$this->upload->display_errors();
return FALSE;
else
$data = $this->upload->data();
echo base_url().'asset/img/'.$_FILES['file']['name'];
public function datasummernote()
$data = array ('success' => false, 'messages' => array());
$this->load->library('form_validation');
$this->form_validation->set_rules('title', 'Title', 'trim
function datanote()
$fetch_data = $this->mdata->make_datatables1();
$data = array();
foreach($fetch_data as $row)
$sub_array = array();
$sub_array[] = $row->id;
$sub_array[] = $row->title;
$sub_array[] = '<a href="'.base_url().'summer/news/'.$row->id.'" class="btn btn-info btn-md">post</a>';
$data[] = $sub_array;
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => $this->mdata->get_all_data('tbnote'),
"recordsFiltered" => $this->mdata->get_filtered_data1(),
"data" => $data
);
echo json_encode($output);
public function news($data)
$cek = $this->mdata->check_all('tbnote',array('id'=>$data),1);
if($cek)
foreach ($cek as $row)
$isi['judul'] = $row->title;
$isi['editor'] = $row->editor;
$isi['title'] = "Data News";
$this->load->view('vnews',$isi);
else
show_404();
dan berikut untuk modelnya Mdata.php
<?php
if ( ! defined('BASEPATH')) exit('No direct script access allowed');
Class Mdata extends CI_Model
public $table1 = "tbnote";
public $select_column1 = array("id", "title",);
public $order_column1 = array("id", "title",);
function make_datatables1()
$this->db->select($this->select_column1);
$this->db->from($this->table1);
if(isset($_POST["search"]["value"]))
$this->db->like("id", $_POST["search"]["value"]);
$this->db->or_like("title", $_POST["search"]["value"]);
if(isset($_POST["order"]))
$this->db->order_by($this->order_column1[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
else
$this->db->order_by('id', 'DESC');
if($_POST["length"] != -1)
$this->db->limit($_POST['length'], $_POST['start']);
$query = $this->db->get();
return $query->result();
function get_filtered_data1()
$this->db->select($this->select_column1);
$this->db->from($this->table1);
if(isset($_POST["search"]["value"]))
$this->db->like("id", $_POST["search"]["value"]);
$this->db->or_like("title", $_POST["search"]["value"]);
if(isset($_POST["order"]))
$this->db->order_by($this->order_column1[$_POST['order']['0']['column']], $_POST['order']['0']['dir']);
else
$this->db->order_by('id', 'DESC');
$query = $this->db->get();
return $query->num_rows();
function get_all_data($table)
$this->db->select("*");
$this->db->from($table);
return $this->db->count_all_results();
//query insert data
function insert_all($table,$data)
$this->db->insert($table,$data);
?>
Sedikit Penjelesan untuk mampu menggunakan summernote, silahkan set tag id atau name, disini aku menggunakan id di element textarea
$('#editordata').summernote
Silahkan mampu dibaca tag comment nya untuk bisa di pelajari, tuk file demonya dan ddownload di link berikut :Live Demo => Source
demo miror link
Review Video berikut => Review Summernote CodeIgniter 3
Terima kasih, semoga membantu..
Post a Comment