[精讚] [會員登入]
885

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

你可能感興趣的文章

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

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

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

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

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

我有話要說

>>

限制:留言最高字數1000字。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

網路喚醒與遠端關機 在管理電腦教室時,常會遇到需要將電腦全部關機或全部開機的情況, 在這裡給自己做個筆記,以免忘了. 先講網路喚醒好了 1.

CentOS 7.4系統安裝 (For SFS3U 量身訂作) 您的聲音,我們聽到了! 為了解決 SFS3 的BIG-5字碼問題,這一年來我們改版了 SFS3,全面採用 UTF8MB4 字碼。現在,就從專用主機架設開始!

關於豐南國中校內伺服器重架後注意事項 以下是為豐南國中電腦操作環境所寫的內容,閒雜人等不需進入