如何在YII2 PHP框架下使用CKEDITOR实现文件上传?

qncylg1j  于 2022-11-09  发布在  PHP
关注(0)|答案(2)|浏览(216)

我是YII2 PHP框架的新手。我想在我的TextArea中实现Ckeditor。我得到了库,但尝试使用CKeidtor查找上传文件。我不知道如何在CkEditor中实现文件上传。Library For CkEditor

yws3nbqq

yws3nbqq1#

如果你还在寻找解决方案或为其他人.2amigos建立了一个惊人的Library为ckeditor在Yii2.要实现它与图像上传选项,你应该设置如下:

<?= $form->field($model, 'yourParameter')
         ->widget(CKEditor::className(), 
            [
              'options' => [], 
              'preset' => 'custom',
              'clientOptions' => [
                  'extraPlugins' => '',
                  'height' => 500,

                  //Here you give the action who will handle the image upload 
                  'filebrowserUploadUrl' => '/site/ckeditor_image_upload',

                  'toolbarGroups' => [
                      ['name' => 'undo'],
                      ['name' => 'basicstyles', 'groups' => ['basicstyles', 'cleanup']],
                      ['name' => 'paragraph', 'groups' => ['list', 'indent', 'blocks', 'align', 'bidi' ]],
                      ['name' => 'styles'],
                      ['name' => 'links', 'groups' => ['links', 'insert']]
                  ]

              ]

            ]) 

?>

现在,因为您必须自己构建图像上载处理程序,所以下面是一个示例,说明您应该如何构建。

public function actionCkeditor_image_upload()
{       
    $funcNum = $_REQUEST['CKEditorFuncNum'];

    if($_FILES['upload']) {

      if (($_FILES['upload'] == "none") OR (empty($_FILES['upload']['name']))) {
      $message = Yii::t('app', "Please Upload an image.");
      }

      else if ($_FILES['upload']["size"] == 0 OR $_FILES['upload']["size"] > 5*1024*1024)
      {
      $message = Yii::t('app', "The image should not exceed 5MB.");
      }

      else if ( ($_FILES['upload']["type"] != "image/jpg") 
                AND ($_FILES['upload']["type"] != "image/jpeg") 
                AND ($_FILES['upload']["type"] != "image/png"))
      {
      $message = Yii::t('app', "The image type should be JPG , JPEG Or PNG.");
      }

      else if (!is_uploaded_file($_FILES['upload']["tmp_name"])){

      $message = Yii::t('app', "Upload Error, Please try again.");
      }

      else {
        //you need this (use yii\db\Expression;) for RAND() method 
        $random = rand(0123456789, 9876543210);

        $extension = pathinfo($_FILES['upload']['name'], PATHINFO_EXTENSION);

        //Rename the image here the way you want
        $name = date("m-d-Y-h-i-s", time())."-".$random.'.'.$extension; 

        // Here is the folder where you will save the images
        $folder = 'uploads/ckeditor_images/';  

        $url = Yii::$app->urlManager->createAbsoluteUrl($folder.$name);

        move_uploaded_file( $_FILES['upload']['tmp_name'], $folder.$name );

      }

      echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction("'
           .$funcNum.'", "'.$url.'", "'.$message.'" );</script>';

    }

}

现在由于CSRF令牌问题,插件有时会有问题。要解决它,你可以停用CSRF令牌只在这个动作如下:

public function beforeAction($action)
{            
    if ($action->id == 'ckeditor_image_upload') {
        $this->enableCsrfValidation = false;
    }

    return parent::beforeAction($action);
}

“图像”选项现在可以使用了。

zpf6vheq

zpf6vheq2#

对于那些谁,因为我没有,寻找完整的文件上传与CKEditor指南(基于弗朗西斯的解决方案).
首先,您应该使用2amigos widget来简化您的工作。
在要包含CKEditor视图中渲染小部件:

<?= $form->field($model, 'YOUR_FIELD_NAME')->widget(CKEditor::className(), [
    'preset' => 'full',
    'clientOptions' => [
        'filebrowserUploadUrl' => '/CONTROLLER_NAME/upload',
        'filebrowserBrowseUrl' => '/CONTROLLER_NAME/browse'
    ]
]);
?>

在上面的代码中,我已经使用了完整的预设,你可以使用任何一个你喜欢的(或自定义它与'自定义'值)。
注意:您应该在url字符串中附加控制器名称,以便它可以同时用于创建和更新操作。
'filebrowserUploadUrl' => 'upload'
在这里你应该输入一个动作的名字,这个动作将处理文件上传。弗朗西斯在这个例子中做得很好,所以我只能说它应该返回如下格式的JSON:

//In case of success:
return [
                'fileName' => $NAME_OF_THE_FILE,
                'uploaded' => true,
                'url' => $URL_TO_SHOW_THE_FILE,
            ];
//In case of error:
return [
            'error' => [
                'message' => $MESSAGE_TEXT,
            ],
        ];

如果您的操作将返回JSON以外的任何内容-它将向您显示带有“未定义”或“服务器响应不正确”消息的警报。
filebrowserBrowseUrl' => 'browse'
如果你不想让用户浏览上传的文件-只需删除该行从小部件选项。
在其他情况下,您应该将actionBrowse方法添加到控制器中,该方法将呈现页面以浏览和选择图像。
控制器方法:

public function actionBrowse(){
    //get function num to pass it to the view (need to be called to pass data of selected file to CKEditor)
    $CKEditorFuncNum = Yii::$app->request->get('CKEditorFuncNum');

    //get list of uploaded files 
    $files = yii\helpers\FileHelper::findFiles($PATH_TO_FOLDER);

    return $this->renderAjax('browse', [
        'funcNum' => $CKEditorFuncNum,
        'files' => $files,
    ]);
}

注意:视图将作为模态对话框打开,所以我更喜欢使用renderAjax而不是render函数来避免渲染布局。
检视档案:

use yii\helpers\Html;

\backend\assets\AppAsset::register($this);

?>
<div class="container">

<h1><?= Html::encode(Yii::t('common', 'Choose any file')) ?></h1>

<?php if (!empty($files)): ?>
    <div class="row">
        <?php foreach ($files as $file):
            $url = "/$file"; ?>
        <div class="col-md-4 mb-2">
            <img 
                src="<?= $url ?>" 
                class="img-thumbnail" 
                style="cursor: pointer; margin-bottom: 2rem"
                onClick="selectImage(<?= $funcNum ?>, '<?= $url ?>')"
            />
        </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>
</div>
<script type="text/javascript">
    function selectImage(funcNum, url){
        window.opener.CKEDITOR.tools.callFunction(funcNum, url)
        window.close()
    }
</script>

此处的selectImage函数将调用CKEditor函数,以将图像url传递给文件上传模态,然后关闭模态对话框。

相关问题