Yii combines CKEditor to implement image upload function_PHP tutorial

In a project I have been working on these days, I need to implement the image upload function in the WYSIWYG editor. I chose CKEditor because I prefer its interface. Although there is CKFinder that works well with CKEditor, its function is too complicated. After briefly looking at the documentation of CKEditor, I found that this function can be implemented by myself without resorting to CKFinder.

Although the following code is based on Yii Framework, the idea is exactly the same when using other frameworks or languages. Children's shoes in need can be referred to.

First of all, to enable the image upload function in CkEditor, you need to configure the filebrowserImageUploadUrl attribute of the editor:

Copy the code The code is as follows:

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

Then implement the image upload function on the corresponding URL and return the HTML code in a specific format to CKEditor, so that CKEditor can preview and insert the image normally.
Only part of the code of the controller is intercepted below. I implemented the Controller part like this:

Copy the code The code is as follows:

/**
* Save the uploaded image
*
* @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 the image upload configuration
$options = Options::model()->findByPk(1);
$form = new UploadForm('image',$options );
$form->upload = CUploadedFile::getInstanceByName('upload');
if($form->validate()){
//File name: 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 the prompt message of CKEditor
*
* @return void
* @author lfyzjck
**/
private function mkhtml($fn, $fileurl, $message)
{
$str = '';
exit($str);
}

The mkhtml function that needs special explanation will call the CKEditor function to generate prompt information. When the upload is successful, the image link will be returned, and CKEditor will generate an image preview based on the URL.

Then comes the UploadForm code, which will verify whether the format and size of the image meet the requirements.

Copy code The code is as follows:

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',
),
);
}
}

http://www.bkjia.com/PHPjc/802217.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/802217.htmlTechArticleIn a project I have been working on these days, I need to implement the image upload function in the WYSIWYG editor. I chose CKEditor because I prefer its interface. Although it works well with CKEditor...