這篇文章會一步步實作 CKEditor 在 CodeIgniter 中圖片以及檔案上傳到 server 的功能，首先我們前往 CKEditor 官網下載最新的版本，這個 demo 使用的是 4.6，存檔後我會放在 assets/ckeditor/ 下，我會使用 Sybio/ImageWorkshop 這個套件對圖片做第一次的壓縮，我們通常不希望 user 存超大的東西在我們這啦，畢竟不是相簿，前台可以順利顯示為準則。
assets/ckeditor/config.js
CKEDITOR.editorConfig = function( config ) { config.toolbar = [ {name:'document', items:['Source','-','Preview','Print']}, {name:'clipboard', items:['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo']}, {name:'basicstyles', items:['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']}, '/', {name:'paragraph', items:['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']}, {name:'links', items:['Link','Unlink']}, {name:'insert', items:['Image','Table']}, {name:'tools', items:['Maximize']} ]; config.enterMode = CKEDITOR.ENTER_BR; config.filebrowserImageUploadUrl = baseUrl + 'ckeditor/image_upload'; config.filebrowserUploadUrl = baseUrl + 'ckeditor/file_upload'; };
這是我常用的 config，工具可以自行增減。
application/views/ckeditor.php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CKEditor Upload Demo</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="assets/ckeditor/ckeditor.js"></script> <script src="assets/ckeditor/adapters/jquery.js"></script> <script type="text/javascript" charset="utf-8"> var baseUrl = "<?php echo base_url(); ?>"; window.CKEDITOR_BASEPATH = "<?php echo base_url('assets/ckeditor'); ?>"; $(function() { $('.ckeditor').ckeditor(); }); </script> </head> <body> <?php echo form_open_multipart('ckeditor/upload'); ?> <?php echo form_textarea(['name' => 'content', 'class' => 'ckeditor']); ?> <?php echo form_submit('submit', '上傳'); ?> <?php echo form_close(); ?> </body> </html>
簡單的設定一下 ckeditor 必要的環境。
application/controllers/Ckeditor.php
<?php defined('BASEPATH') or exit('No direct script access allowed'); use PHPImageWorkshop\ImageWorkshop; class Ckeditor extends CI_Controller { /** * Upload path. * * @var string */ private $path = 'assets/uploads/ckeditor/'; /** * Index page. */ public function index() { $this->load->helper('form'); $this->load->helper('url'); $this->load->view('ckeditor'); } /** * CKEditor image upload * * Upload by ImageWorkshop package * * @return string */ public function image_upload() { $this->load->helper('url'); $funcNum = $this->input->get('CKEditorFuncNum'); $source = $_FILES['upload']['tmp_name']; $file = $_FILES['upload']['name']; $ext = pathinfo($file, PATHINFO_EXTENSION); $ratio = 1200; // 寬度最大比例 $allows = [1, 2, 3]; // GIF, JPEG, PNG $newName = date('YmdHis').rand(1000, 9999); //新檔名 $message = ''; $url = ''; try { $exif = exif_imagetype($source); if (!$exif) { throw new Exception('檔案格式錯誤'); } if (!in_array($exif, $allows)) { throw new Exception('僅允許 gif, jpeg, png'); } $imageInfo = getimagesize($source); $layer = ImageWorkshop::initFromPath($source); // 若寬度大於比例，縮放置比例 if ($imageInfo[0] > $ratio) { $layer->resizeInPixel($ratio, null, true); } $fileName = "{$newName}.{$ext}"; $layer->save($this->path, $fileName); $url = base_url($this->path.$fileName); } catch (Exception $e) { $message = $e->getMessage(); } $string = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction({$funcNum}, '{$url}', '{$message}');</script>"; $this->output ->set_content_type('text/html') ->set_output($string); } /** * CKEditor image upload * * @return string */ public function file_upload() { $this->load->helper('url'); $funcNum = $this->input->get('CKEditorFuncNum'); $source = $_FILES['upload']['tmp_name']; $file = $_FILES['upload']['name']; $ext = pathinfo($file, PATHINFO_EXTENSION); $newName = date('YmdHis').rand(1000, 9999); //新檔名 $message = ''; $url = ''; try { $fileName = "{$newName}.{$ext}"; $target = $this->path.$fileName; if (move_uploaded_file($source, $target)) { $url = base_url($target); } else { $message = '上傳失敗'; } } catch (Exception $e) { $message = $e->getMessage(); } $string = "<script type=\"text/javascript\">window.parent.CKEDITOR.tools.callFunction({$funcNum}, '{$url}', '{$message}');</script>"; $this->output ->set_content_type('text/html') ->set_output($string); } }
我們建立了 Ckeditor 的 controller，把 form 放在首頁，這個部份包含了圖片跟檔案上傳的程式碼，圖片部份也包含了檔案格式檢查、檔案尺寸檢查，如果還需要檢查更多的東西就在 try catch 裡面再加。
