Yii et CKEditor implémentent la fonction de téléchargement d'images

Cet article présente principalement la fonction de téléchargement d'images de Yii combinée avec CKEditor. Yii est le célèbre framework de développement PHP, et CKEditor est le célèbre éditeur WYSIWYG. Les amis qui en ont besoin peuvent se référer à

Ceci dans un projet. J'ai travaillé dessus il y a quelques jours, j'avais besoin d'implémenter la fonction de téléchargement d'images dans l'éditeur WYSIWYG. J'ai choisi CKEditor parce que je préférais son interface. Bien qu'il existe CKFinder qui fonctionne bien avec CKEditor, sa fonction est trop compliquée. Après avoir brièvement consulté la documentation de CKEditor, j'ai trouvé que cette fonction pouvait être implémentée par moi-même sans recourir à CKFinder.

Bien que le code suivant soit basé sur Yii Framework, l'idée est exactement la même lorsque l'on utilise d'autres frameworks ou langages. Les chaussures pour enfants dans le besoin peuvent être référencées.

Tout d'abord, pour activer la fonction de téléchargement d'images dans CkEditor, vous devez configurer l'attribut filebrowserImageUploadUrl de l'éditeur :

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

Ensuite, implémentez la fonction de téléchargement d'images sur l'URL correspondante et renvoie une fonction spécifique au code HTML du format CKEditor, CKEditor peut prévisualiser et insérer des images normalement.
Ce qui suit n'intercepte qu'une partie du code du contrôleur. J'ai implémenté la partie Contrôleur comme ceci :

/**
 * 保存上传的图片
 *
 * @return string javascript code
 * @author lfyzjck
 **/
public function actionImg($type, $CKEditor, $CKEditorFuncNum, $langCode = 'zh-cn')
{
 if(empty($CKEditorFuncNum) || $type != 'Images'){
  $this->mkhtml($CKEditorFuncNum,'','错误的函数调用');
 }
 if(isset($_FILES['upload'])){
  //获取关于图片上传配置
  $options = Options::model()->findByPk(1);
  $form = new UploadForm('image',$options);
  $form->upload = CUploadedFile::getInstanceByName('upload');
  if($form->validate()){
  //文件名：时间+源文件名
   $target_filename = date('Ymd-hm',time()).$form->upload->getName();
   $path = Yii::app()->basePath.'/../uploads/'.$target_filename;   //图片保存路径
   $form->upload->saveAs($path);
   $this->mkhtml($CKEditorFuncNum,Yii::app()->baseUrl.'/uploads/'.$target_filename, "上传成功");
  }
  else{
   $this->mkhtml($CKEditorFuncNum,'',$form->getError('upload'));
  }
 }
}
/**
 * 返回CKEditor的提示信息
 *
 * @return void
 * @author lfyzjck
 **/
private function mkhtml($fn, $fileurl, $message) 
{
 $str = '';
 exit($str);
}

La fonction mkhtml qui nécessite une explication particulière appellera la fonction CKEditor pour générer des informations d'invite. Une fois le téléchargement réussi, le lien de l'image sera renvoyé et CKEditor générera un aperçu de l'image basé sur l'URL.

Vient ensuite le code UploadForm, qui vérifiera si le format et la taille de l'image répondent aux exigences.

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'=>'文件大小超过限制',
   ),
  );
 }
}

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de Yii Méthode Framework pour obtenir toutes les sous-classes de la catégorie

Comment Yii2 utilise le plug-in Bootbox pour implémenter des fenêtres contextuelles personnalisées

 Utilisez les autorisations Yii2 rbac pour contrôler le menu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!