ckeditor + ckfinder 應用在Laravel

ckfinder 說明:https://github.com/ckfinder/ckfinder-laravel-package

ckeditor: https://ckeditor.com/ckeditor-4/download/

一.ckeditor提供編輯器功能

在view的頁面加載editor  full js

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script src="//cdn.ckeditor.com/4.10.0/full/ckeditor.js"></script>
<textarea id="editor1" name="editor1" cols="100" rows="30" name="update_context">

</textarea>
<script >

var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor );
</script>

二.ckfinder 

1.Laravel  下安裝 ，版本需要大於5.5 且需要extension gd等

 
composer require ckfinder/ckfinder-laravel-package

2.Run the command to download the CKFinder code.

 
php artisan ckfinder:download

3.Publish the CKFinder connector configuration and assets.

 
php artisan vendor:publish --tag=ckfinder

4.Create a directory for CKFinder files and allow for write access to it. By default CKFinder expects the files to be placed in public/userfiles (this can be altered in the configuration).

 
mkdir -m 777 public/userfiles

5.laravel config 會多出一個設定檔案

 
config/ckfinder.php

6.在view頁面引入

 
@include('ckfinder::setup')

7.上傳的圖片位置會出現在 userfiles 資料夾底下。

8.程式碼範例

 

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

<!-- Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">

<!-- jQuery文件。在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script src="//cdn.ckeditor.com/4.10.0/full/ckeditor.js"></script>
@include('ckfinder::setup')
<textarea id="editor1" name="editor1" cols="100" rows="30" name="update_context">

</textarea>
<script >

var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor );
</script>

9.資料夾權限等級劃分
 (不是用laravel session  因為laravel session無法在config設定檔用)

在登入的controller控制器使用php session

//登入
Session::put('userDatas',$account);
$_SESSION['ckfinder_file'] = Session::get('userDatas');

//登出
session_destroy();

在  config/ckfinder.php 加入以下片段

//最前面
session_start();

if(isset($_SESSION['ckfinder_file'])) {

    $ckfinder_file = $_SESSION['ckfinder_file'];
} else {
    $ckfinder_file = "temp";
}

// Backend 調整

$config['backends']['default'] = array(

    'name'         => 'default',
    'adapter'      => 'local',
    'baseUrl'      => env('APP_URL').'userfiles/'.$ckfinder_file."/",
    'root'         => public_path('userfiles/').$ckfinder_file."/",
    'chmodFiles'   => 0777,
    'chmodFolders' => 0755,
    'filesystemEncoding' => 'UTF-8'

);