Yii2 integrates Baidu editor umeditor and umeditor Image Upload solution, yii2umeditor

Yii2 integrates Baidu editor umeditor and umeditor Image Upload solution, yii2umeditor

Next, let's talk about how the Yii2 framework integrates Baidu editor umeditor.

What is umeditor? I have only heard of ueditor. Are you a pirated umeditor? Umeditor, to put it bluntly, is the mini version of ueditor. According to Baidu's official statement, it is actually the "short soft and small" in the editor, but the function is optimized. Ke, let's get back to the question.

First, let's download a mini version of ueditor umeditor on the official website. Note that it's um editor.

Download the package, decompress it, and put it in the/css directory under the project root directory and name it umeditor. You can refer to it later.

Step 2: Expand the backend \ assets \ Appset class first. Why do we need to extend this kind of stuff and integrate it with our umeditor. The purpose of extending this class file here is to facilitate the introduction of css js file drops in the file.

It's easy to add the following two methods to the Appset method:

// Define the JS method to be loaded as needed. Pay attention to the loading order in the final public static function addScript ($ view, $ jsfile) {$ view-> registerJsFile ($ jsfile, [AppAsset :: className (), 'desc' => 'backend \ assets \ appasset']);} // defines the On-Demand Loading css method, note that the loading sequence is in the final public static function addCss ($ view, $ cssfile) {$ view-> registerCssFile ($ cssfile, [AppAsset: className (), 'desc' => 'backend \ assets \ appasset']);}

Next, follow the configuration below.

Here, we assume there is an article table, and a content field needs to be displayed as Baidu editor.

According to the form model of yii2, we modify the content field in the article \ _ form. php file.

<?= $form->field($model, 'content')->textarea(['style' => 'width:760px;height:500px;']) ?> 

This 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, you only need to register the following js Code at the bottom of the current page.

<?php $this->beginBlock('js-block') ?>$(function () {var um = UM.getEditor('article-content', {});});<?php $this->endBlock() ?><?php $this->registerJs($this->blocks['js-block'], \yii\web\View::POS_END); ?> 

This is the target object to be bound, that is, content. Article-content is the id of the current object.

OK. The Baidu editor is basically integrated here. Now, add an article and try again. Remember to update it to see if there is any content in the editor.

The following describes how yii2 solves the problem of umeditor image uploading in Baidu editor.

The yii2 framework integrates the Baidu editor. Because the file is uploaded using the UploadedFile provided by yii2, The umeditor upload will inevitably fail. To solve the problem, only two steps are required, let's take a look at the specific implementation

First, we need to configure umeditor. Here we only need to change the imageUrl configuration item. We can modify it to point to/tools/um-upload.

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

According to the ueditor implementation, we only need to return the successful message after the upload is successful.

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

Note: In the $ info returned above, the state can only be SUCCESS, case sensitive.