[精讚] [會員登入]
1031

Yii2 中使用 CKeditor 的檔案上傳功能

在 Yii2 的設計經驗中, 常常會使用 CKediotr 做為 textarea 的編輯器, 但是插圖或檔案上傳需要另

分享此文連結 //n.sfs.tw/12781

分享連結 Yii2 中使用 CKeditor 的檔案上傳功能@杜子的網管筆記
(文章歡迎轉載,務必尊重版權註明連結來源)
2019-10-25 08:12:17 最後編修
2018-10-04 15:36:45 By 杜子
 

在 Yii2 的設計經驗中,

常常會使用 CKediotr 做為 textarea 的編輯器,

但是插圖或檔案上傳需要另外做設定,而且常會忘記怎麼設定,

乾脆做個筆記好了。

 

原理

在 CKeditor 裡,按下檔案上傳時,應該是利用 ajax 之類的技術在背景返回 server端處理上傳檔案,所以需要告訴 CKeditor 要用哪個 action 處理上傳後的檔案,處理完畢後再把檔案的 URL 位置回傳給 CKeditor。

 

程式碼部份

表單部分的程式 ( _form.php )

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use dosamigos\ckeditor\CKEditor;

/* 製作檔案上傳的 action 的絕對路徑 , 並存在 $url 變數中 */
$url=Yii::$app->urlManager->createAbsoluteUrl(['editor/file-upload']);

?>
<div class="editor-form">
    <?php $form = ActiveForm::begin(); ?>
    <?= $url ?>
    <?= $form->field($model, 'memo')->widget(CKEditor::className(), [
        'options' => ['rows' => 6],
        'preset' => 'full',
        'clientOptions' => [ 'filebrowserUploadUrl' => $url ] //要把這個 aciton 傳給 CKeditor
    ]) ?>
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
    <?php ActiveForm::end(); ?>
</div>

 

檔案上傳處理程式 ( EditorController.php )

public function actionFileUpload() {
        //先取得檔案要存放的路徑 , 等一下才能把暫存檔搬過去
        $uploadPath = Yii::getAlias('@webroot').'/uploads/';
        //確認檔案有上傳成功再處理
        if (isset($_FILES["upload"]["name"]) && $_FILES["upload"]["error"] == 0) {
            //檔案上傳,改檔名
            $org_name=explode(".",$_FILES["upload"]["name"]);
            //新檔名
            $upload_filename=time().".".$org_name[count($org_name)-1];
            //把暫存檔案搬到目錄中
            move_uploaded_file($_FILES["upload"]["tmp_name"], $uploadPath . $upload_filename);
            //要回傳給 CKeditor 的檔案 URL 
            $url = Yii::$app->urlManager->createAbsoluteUrl('/uploads/'.$upload_filename);
            //如果有什麼額外的回饋訊息,要打在這裡
            $message="";
            $funcNum = $_GET['CKEditorFuncNum'] ;
            //利用 JavaScript 指令回傳
            echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
        } // end if
}

 

 

 

 

END

你可能感興趣的文章

Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉 Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉

利用 Composer 建立 Yii2 專案 最近由於學校的網路架構調整及更新所有的個人電腦作業系統為 Win 10 , 讓我忙得不可開交, 偏偏 sfs3 此時在台

在 Yii2 使用日期 widget的方法 在 Yii2 裡,讓使用者輸入日期時,可以利用 widget 就可以很方便的達成, f

Yii2 中使用 CKeditor 的檔案上傳功能 在 Yii2 的設計經驗中, 常常會使用 CKediotr 做為 textarea 的編輯器, 但是插圖或檔案上傳需要另

Adminlte 取消預設 icon 的方法 Adminlte 是個很好用的樣版, 但是選單的 icon 預設只能用 Font Awesome 的圖示, 如果沒有指定

隨機好文

Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉 Yii2 使用 MODAL class 呈現內容時,如何防止滑鼠失焦導致頁面自動關閉

SFS3U 的安裝與更新 「SFS3-Unicode補完計劃」已屆完工,除了支援 108課綱,也一併解決多年來 Big-5字碼問題,新版本的 SFS3 簡稱 SFS3U。

學校活動照片與影片如何取得? 從今年度開始,將要求各位行政同仁把照片或活動影片擺到 Google 雲端硬碟

MariaDB 的效能調整筆記 因應臺中市網路應用競賽的需求, 自己開發了一套校內初賽專用的系統, 因為是比賽的系統,所以會有短時間大量同時登入的情況,