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

Let's talk about how the YII2 framework integrates Baidu editor Umeditor.

Umeditor is what, I have only heard ueditor, you this umeditor is not pirated east of the east? Umeditor, plainly is the mini version of the Ueditor, in accordance with the official Baidu, in fact, is the editor of the "short soft small", but functional and taste. Cough, let's get back to the chase.

First of all, let's go to the official website to download a mini version of Ueditor Umeditor, note Oh, is the UM editor.

Download down to the project root directory under the/css directory under the name of Umeditor, the specific location of everyone at random, the back can be quoted to the line.

The second step, we first go to expand the next Backend\assets\appset class, oops I rub, why to expand such a thing, with our umeditor integration what relationship le, proving out. The purpose of this extension is to facilitate the introduction of CSS JS files in the file.

It is simple to add the following two methods to the Appset method

Define 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 '); }//define load CSS methods on demand, note the load order in the last public static function Addcss ($view, $cssfile) {$view->registercssfile ($cssfile, [ Appasset::classname (), ' depends ' = ' backend\assets\appasset ']); }

Next, follow the configuration below.

To do this first, here we assume that there is an article article table, there is a content contents field needs to be displayed as Baidu Editor.

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

The file introduces the Appset class and introduces the relevant CSS JS file 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

About Article-content, this is the target object we want to bind to, the content. Article-content is the ID identifier of the current object.

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

below to introduce YII2 solution Baidu Editor Umeditor picture upload problem.

YII2 Framework integrated Baidu Editor, because the file upload is Yii2 bring the uploadedfile, it is inevitable umeditor upload unsuccessful problem, solve the problem only need 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 to/tools/um-upload

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

In accordance with the implementation of the Ueditor, we only need to return success information here after the successful upload

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" and "= $model->file-> Type, "state" = ' SUCCESS ',];exit (Json_encode ($info));} }}

Special reminder: The state status of the returned $info information can only be success, case-sensitive

