Yii and CKEditor for picture upload

  • 2021-06-29 10:41:39
  • OfStack

One of the projects I've been working on these days requires the ability to upload pictures in a WYSIWYG editor, which I chose because I prefer the CKEditor interface.Although there is CKFinder which works well with CKEditor, the function of this East is too complex. Looking at the documentation of CKEdtior, we can find that this function can be achieved by itself without the help of CKFinder.

Although the code below is based on Yii Framework, but with other frameworks or language ideas are exactly the same, there is a need for children's shoes can refer to 1.

To first enable CkEditor to upload pictures, you need to configure the editor's filebrowserImageUploadUrl property:


CKEDITOR.replace( 'editor1',
    {
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
    });

Then the corresponding URL can upload pictures and return HTML code in a specific format to CKEditor. CKEditor can preview and insert pictures normally.
The following intercepts only part of the controller code, as I did for the Controller part:

/**
 *  Save Uploaded Pictures 
 *
 * @return string javascript code
 * @author lfyzjck
 **/
public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = 'zh-cn')
{
 if(empty($CKEditorFuncNum) || $type != 'Images'){
  $this->mkhtml($CKEditorFuncNum,'',' Wrong function call ');
 }
 if(isset($_FILES['upload'])){
  // Get information about picture upload configuration 
  $options = Options::model()->findByPk(1);
  $form = new UploadForm('image',$options);
  $form->upload = CUploadedFile::getInstanceByName('upload');
  if($form->validate()){
  // Filename: Time + Source File Name 
   $target_filename = date('Ymd-hm',time()).$form->upload->getName();
   $path = Yii::app()->basePath.'/../uploads/'.$target_filename;   // Picture Save Path 
   $form->upload->saveAs($path);
   $this->mkhtml($CKEditorFuncNum,Yii::app()->baseUrl.'/uploads/'.$target_filename, " Upload Successful ");
  }
  else{
   $this->mkhtml($CKEditorFuncNum,'',$form->getError('upload'));
  }
 }
}
/**
 *  Return CKEditor Tips 
 *
 * @return void
 * @author lfyzjck
 **/
private function mkhtml($fn, $fileurl, $message) 
{
 $str = '';
 exit($str);
}

The mkhtml function, which needs special explanation, calls the CKEditor function to give a hint.Return the link to the picture when the upload is successful, and CKEditor generates a picture preview based on URL.

Then there's the UploadForm code, which verifies that the format and size of the picture are correct.


class UploadForm extends CFormModel
{
 public $upload;
 private $options;
 private $type;
 public function __construct($type, $options){
  $this->options = $options;
  $this->type = $type;
 }
 /**
  * Declares the validation rules.
  * The rules state that username and password are required,
  * and password needs to be authenticated.
  */
 public function rules()
 {
  return array(
   array('upload', 'file', 
    'types' => $this->options->getAttribute("allow_".$this->type."_type"), 
    'maxSize' => 1024 * (int)$this->options->getAttribute("allow_".$this->type."_maxsize"),
    'tooLarge'=>' File size exceeds limit ',
   ),
  );
 }
}


Related articles: