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

Question

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

Answer 1

如果您仍在寻找解决方案或其他人。2amigos在Yii2中为ckeditor构建了一个令人惊叹的Library。要使用图片上传选项来实现它，您应该进行如下设置：

 <?= $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-Token问题，插件有时会出现问题。要解决此问题，您可以仅在此操作上停用CSRF令牌，如下所示：

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

    return parent::beforeAction($action);
}

映像选项现在可以使用了。

Answer 2

对于那些像我一样寻找完整的CKEditor文件上传指南的人(基于弗朗西斯的解决方案)。

首先，你应该使用2amigos widget让你的生活变得更容易。

在您希望包含CKEditor的视图中呈现该小部件：

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

在上面的代码中，我使用了完整的预设，你可以使用你喜欢的任何一个(或者使用'custom‘值对其进行自定义)。

注意:您应该在url字符串中附加控制器名称，以便可以在创建和更新操作中使用它

'filebrowserUploadUrl' => 'upload'

您应在此处键入将处理文件上载的操作名称。Francis在示例方面做得很好，所以我只能说它应该以这样的格式返回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函数来避免渲染布局。但是，如果您想使用资产包，我不建议您使用renderPartial

查看文件：

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传递给文件上传模式，然后关闭模式对话框。