การใช้งาน CKEditor CDN ร่วมกับ codeigniter อย่างง่าย

เขียนเมื่อ 5 ปีก่อน โดย Ninenik Narkdee
ckeditor codeigniter ckeditor cdn codeigniter 3

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ckeditor codeigniter ckeditor cdn codeigniter 3



 
สำหรับเนื้อหาในตอนต่อไปนี้ เราจะมาทำในส่วนของการอัพเดทข้อมูลของหน้า
"เกี่ยวกับเรา" aboutus ของโปรเจ็คของเรา โดยรูปแบบจะเป็นการเก็บข้อมูลหัวข้อ 
และรายละเอียดในรูปแบบ HTML โดยจะใช้ CKEditor CDN มาประยุกต์ใช้งาน
 
ก่อนอื่นสร้างตาราง tbl_aboutus ตามโครงสร้างต่อไปนี้
โดยให้ทำการเพิ่มข้อมูลเริ่มต้นเข้าไปด้วย เนื้อหานี้ เราจะทำเฉพาะการอัพเดทข้อมูล
 
 
CREATE TABLE IF NOT EXISTS `tbl_aboutus` (
  `aboutus_id` tinyint(1) unsigned NOT NULL,
  `aboutus_title` varchar(150) NOT NULL,
  `aboutus_detail` text NOT NULL,
  `aboutus_update` datetime NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;


INSERT INTO `tbl_aboutus` (`aboutus_id`, `aboutus_title`, `aboutus_detail`, `aboutus_update`) VALUES
(1, 'AboutUs Title', 'Aboutus Detail', '2015-09-19 00:00:00');

ALTER TABLE `tbl_aboutus`
  ADD PRIMARY KEY (`aboutus_id`);

ALTER TABLE `tbl_aboutus`
  MODIFY `aboutus_id` tinyint(1) unsigned NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=2;
 
 
หลังจากนั้นให้เราสร้างไฟล์ admin_aboutus.php ในโฟลเดอร์ apps > views > admin
โดยวางรูปแบบฟอร์มอัดเดทข้อมูล อย่างง่ายตามนี้ 
* เนื่องจากรูปแบบการใช้งานไม่มีความยุ่งยาก เราจึงไม่จำเป็นต้องสร้างเป็น model แต่จะเขียน
โค้ดอัพเดทข้อมูลทั้งหมดในส่วนของ views แทนเลย และจะไม่มีการใช้งานการตรวจสอบฟอร์มด้วย
form validation เพื่อให้การนำเสนอกระทัดรัด 
 
<div class="container">

About Us  
<br><br>
<?php
if($this->input->post('save_data')){ // เมื่อทำการกดปุ่ม sumit
    $newdata = array(
        'aboutus_title' => $this->input->post('aboutus_title'),
        'aboutus_detail' => $this->input->post('aboutus_detail'),
        'aboutus_update' => date("Y-m-d H:i:s")
    );
    $this->db->update('tbl_aboutus', $newdata,array('aboutus_id'=>1));
    redirect('admin/aboutus'); // ไปหน้าเดิม หรือก็ือให้รีโหลด
}
?>
<?php
$query = $this->db->get_where("tbl_aboutus",array("aboutus_id"=>1));
$row = $query->row_array();  //คิวรี่ข้อมูลมาแสดงแค่รายการเดียว  
if(isset($row))  // ถ้ามีข้อมูล   
{  
?>
<form action="<?=base_url('admin/aboutus')?>" method="post">
       
<table class="table">
    <tr>
    <th>หัวข้อ: </th>
    <tr>
    </tr>    
        <td>
         <input type="text" name="aboutus_title" class="form-control" value="<?=$row['aboutus_title']?>">   
        </td>
    </tr>    
    <tr>
        <th>รายละเอียด: </th>
    </tr>    
    <tr>
        <td>
        <textarea name="aboutus_detail" rows="10"  class="form-control"><?=$row['aboutus_detail']?></textarea>        
        </td>
    </tr>  
    <tr>
        <td><input type="submit" value="Update Data" name="save_data" class="btn btn-primary"></td>
    </tr>
</table>
              
</form>       

<?php } ?>          
    
</div>
 
โค้ดข้างต้นเป็นการดึงข้อมูลเดิม จากตาราง tbl_aboutus มาแสดงในฟอร์ม และเมื่อทำการกดปุ่ม submit
ข้อมูลก็จะทำการอัพเดท
 
ต่อไปให้เราสร้างลิ้งค์ในไฟล์ admin_header.php ที่อยู่ในโฟลเดอร์ apps > views >admin 
โดยเพิ่มเมนูของหน้าจัดการ "เกี่ยวกับเรา" ดังนี้
 
        <?php if(isset($_SESSION['ses_admin_id']) && $_SESSION['ses_admin_id']!=""){?>
        <li><a href="<?=base_url('admin/user')?>">User</a></li>  
        <li><a href="<?=base_url('admin/aboutus')?>">About Us</a></li>  
        <li><a href="<?=base_url('admin/service')?>">Service</a></li>  
         <li><a href="<?=base_url('admin/logout')?>">Logout</a></li>  
         <?php } ?>
 
 
 
จะเห็นว่าการสร้างฟอร์มอัพเดทข้อมูลอย่างเดียว สามารถทำได้อย่างง่าย แต่จุดประสงค์หลักของเรา
คือต้องการจัดเก็บข้อมูล รายละเอียดในรุปแบบที่รองรับ HTML แท็กได้ และจะใช้ CKEditor CDN
 

การเรียกใช้งาน CKEditor CDN และการปรับแต่ง

 
ต่อไปเราจะประยุกต์ใช้งาน CKEditor CDN กับส่วนของ textarea ในไฟล์ admin_aboutus.php
ก่อนอื่นให้เราสร้างไฟล์ สำหรับการปรับแต่ง CKEditor CDN ดังนี้
ในโฟลเดอร์ js ตำแหน่งเดียวกับโฟลเดอร์ apps และ sys ให้เราสร้างโฟลเดอร์ ckeditor ต่อด้วย
สร้างไฟล์ config.js โครงสร้างโฟลเดอร์ และไฟล์
 
  • - apps
  • - sys
  • - js > cheditor > config.js
 
โดยการตั้งค่าต่างๆ ของ CKEditor สามารถดูได้ที่ http://docs.ckeditor.com/#!/guide/dev_configuration
สำหรับของเรา จะตั้งค่ารูปแบบแค่ 2 ส่วนคือ ภาษา และ สีพื้นหลัง ckeditor
จะได้ไฟล์ config.js ดังนี้
 
CKEDITOR.editorConfig = function( config ) {
    config.language = 'th';
    config.uiColor = '#F7F7F7';
};
 
จากนั้นเรากลับมาที่ไฟล์ admin_aboutus.php ในโฟลเดอร์ apps > views > admin
เราจะมาเรียกใช้งาน CKEditor CDN ดูวิธีการใช้งาน CKEditor เพิ่มเติม ได้ที่ http://cdn.ckeditor.com/
โดยให้เราเพิ่มโค้ดต่อไป เข้าไปในส่วนท้ายของไฟล์ admin_aboutus.php
 
<script src="//cdn.ckeditor.com/4.5.3/standard/ckeditor.js"></script>     
<script>
CKEDITOR.replace( 'aboutus_detail', {
    customConfig:'<?=base_url('js/ckeditor/config.js')?>'
});
</script>    
 

จะได้ไฟล์ admin_aboutus.php เป็นดังนี้

 
<div class="container">

About Us  
<br><br>
<?php
if($this->input->post('save_data')){ // เมื่อทำการกดปุ่ม sumit
    $newdata = array(
        'aboutus_title' => $this->input->post('aboutus_title'),
        'aboutus_detail' => $this->input->post('aboutus_detail'),
        'aboutus_update' => date("Y-m-d H:i:s")
    );
    $this->db->update('tbl_aboutus', $newdata,array('aboutus_id'=>1));
    redirect('admin/aboutus'); // ไปหน้าเดิม หรือก็ือให้รีโหลด
}
?>
<?php
$query = $this->db->get_where("tbl_aboutus",array("aboutus_id"=>1));
$row = $query->row_array();  //คิวรี่ข้อมูลมาแสดงแค่รายการเดียว  
if(isset($row))  // ถ้ามีข้อมูล   
{  
?>
<form action="<?=base_url('admin/aboutus')?>" method="post">
       
<table class="table">
    <tr>
    <th>หัวข้อ: </th>
    <tr>
    </tr>    
        <td>
         <input type="text" name="aboutus_title" class="form-control" value="<?=$row['aboutus_title']?>">   
        </td>
    </tr>    
    <tr>
        <th>รายละเอียด: </th>
    </tr>    
    <tr>
        <td>
        <textarea name="aboutus_detail" rows="10"  class="form-control"><?=$row['aboutus_detail']?></textarea>        
        </td>
    </tr>  
    <tr>
        <td><input type="submit" value="Update Data" name="save_data" class="btn btn-primary"></td>
    </tr>
</table>
              
</form>       

<?php } ?>     
<script src="//cdn.ckeditor.com/4.5.3/standard/ckeditor.js"></script>     
<script>
CKEDITOR.replace( 'aboutus_detail', {
    customConfig:'<?=base_url('js/ckeditor/config.js')?>'
});
</script>    
</div>
 
เท่านี้ เราก็สามารถบันทึกข้อมูล ในส่วนของรายละเอียดเนื้อหา "เกี่ยวกับเรา" ในรูปแบบของ HTML ได้แล้ว
สวนการปรับแต่งเพิ่มเติมสำหรับ ckeditor ก็สามารถทำได้ในไฟล์ config.js ในโฟลเดอร์ js > ckeditor 
 
ดูตัวอย่างหน้าตาของหน้าจัดการส่วนเนื้อหา Aboutus ที่มีการใช้งาน CKEditor CDN




 


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ













URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ