YII2 integrated Baidu editor umeditor and Umeditor picture upload problem Solution _php Example

We'll talk about the YII2 framework is how to integrate the Baidu editor Umeditor.

Umeditor is what, I have only heard ueditor, you this umeditor is not pirated Dongdong nan? Umeditor, plainly is the mini version of the Ueditor, according to the official Baidu, in fact, is the editor of the "short soft small", but the function is all. Cough, let's get back to business.

First Le, we first go to the official website to download a mini version of Ueditor Umeditor, note oh, is UM editor.

Download down to unzip the project root directory under the/css directory named Umeditor, the specific location you are free, the following can be cited to the line.

The second step, we first to expand the Backend\assets\appset class, ah I rub, why to expand such a thing, with our umeditor integration of what relationship le, Schen out. This extension of this class file is intended to facilitate the introduction of the file in the CSS JS file drop.

Simply add the following two methods to the Appset method

Defines the on demand load JS method, noting that the load order is in the last public 
static function Addscript ($view, $jsfile) { 
$view->registerjsfile ($jsfile, [Appasset::classname (), ' Depends ' => ' backend\assets\appasset ']); 
} 
Defines on-demand loading of CSS methods, noting that the load order is in the last public 
static function Addcss ($view, $cssfile) { 
$view->registercssfile ($cssfile , [Appasset::classname (), ' Depends ' => ' backend\assets\appasset ']); 

Next, follow the configuration below.

First of all, here we assume that there is an article article table, there is a content contents field needs to display as Baidu Editor.

According to Yii2 's form model, we modify the content fields in the article\_form.php file

This file introduces the Appset class and introduces the relevant CSS JS files as follows

Use Backend\assets\appasset;
Appasset::register ($this);
Appasset::addcss ($this, '/css/umeditor/themes/default/css/umeditor.css ');
Appasset::addscript ($this, '/css/umeditor/umeditor.config.js ');
Appasset::addscript ($this, '/css/umeditor/umeditor.min.js ');
Appasset::addscript ($this, '/css/umeditor/lang/zh-cn/zh-cn.js ');

Then only need to register the following JS code at the bottom of the current page to achieve

<?php $this->beginblock (' Js-block ')?>
$ (function () {
var um = um.geteditor (' article-content ', {
});
});
<?php $this->endblock ()?>

About article-content How to drop Nan, this is the target object that we want to bind, namely content. Article-content is the ID identifier of the current object.

OK, to this Baidu editor basically integration finished, now quickly to add an article to try it, remember to update to see if there is content in the editor.

below to introduce Yii2 solve Baidu editor umeditor picture upload problem.

Yii2 Frame integration of Baidu Editor, because the file upload is yii2 from the UploadedFile, this will inevitably umeditor upload unsuccessful problem, solve the problem requires only two steps, we look at the specific implementation

First we put the Umeditor configuration well, here only need to change the ImageUrl configuration item, we modify its point/tools/um-upload

Then the next step is to implement the/tools/um-upload method,

According to Ueditor's implementation, here we upload success only need to return success information

Use Backend\models\upload;
Use Yii\web\uploadedfile;
/**
* Baidu Umeditor upload/public
function actionumupload ()
{
$model = new Upload ();

if (Yii:: $app->request->ispost) {

$model->file = uploadedfile::getinstance ($model, ' file ');

$dir = ' File save directory ';
if (!is_dir ($dir))
mkdir ($dir);

if ($model->validate ()) {
$fileName = $model->file->basename. '.' . $model->file->extension;
$dir = $dir. '/'. $fileName;
$model->file->saveas ($dir);
$info = [
"Originalname" => $model->file->basename,
"name" => $model->file->basename,
"url" => $dir,
"size" => $model->file->size,
"type" => $model->file->type,
"state" => ' SUCCESS ',
];
Exit (Json_encode ($info));}}

Special reminder: State states can only be success in the $info information returned above, case-sensitive