yii2 integrates Baidu editor umeditor and umeditor image upload problem solution, yii2umeditor

Let’s talk about how the Yii2 framework integrates Baidu editor umeditor.

What is umeditor? I have only heard of ueditor. Is your umeditor a pirated copy of Dongdongnan? UEditor, to put it bluntly, is the mini version of UEditor. According to Baidu's official statement, it is actually a "short, soft and small" editor, but with full functions. Ahem, let’s get back to the topic.

First of all, let’s go to the official website to download a mini version of ueditor umeditor. Note that it is um editor.

Download it, unzip it, and put it in the /css directory under the project root directory. Name it umeditor. The specific location is up to you, as long as it can be referenced later.

In the second step, we first extend the backendassetsAppset class. Oops, why do we need to extend such a thing? What does it have to do with integrating it with our umeditor? Cheng Yaojin came out halfway. The purpose of extending this class file here is to facilitate the introduction of css js files into the file.

It’s very simple, just add the following two methods to the Appset method

//定義按需加載JS方法，注意加載順序在最后 
public static function addScript($view, $jsfile) { 
$view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']); 
} 
//定義按需加載css方法，注意加載順序在最后 
public static function addCss($view, $cssfile) { 
$view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']); 
}

Next, follow the configuration below.

Let me explain first. Here we assume that there is an article table and a content field that needs to be displayed in Baidu Editor.

According to the yii2 form model, we modify the content field in the article_form.php file

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

This file introduces the Appset class and 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 you only need to register the following js code at the bottom of the current page to achieve it

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

Regarding how article-content comes from, this is the target object we want to bind, that is, content. article-content is the current ID of the object.

ok, now the Baidu editor is basically integrated. Now hurry up and add an article to give it a try. Remember to update to see if there is content in the editor.

The following will introduce to you how yii2 solves the problem of image uploading in Baidu editor umeditor.

The yii2 framework integrates the Baidu editor. Because the file upload uses the UploadedFile that comes with yii2, it is inevitable that the umeditor upload will not be successful. To solve the problem, only two steps are needed. Let’s take a look at the specific implementation

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

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

According to the implementation of ueditor, here we only need to return success information after the upload is successful

use backend\models\Upload;
use yii\web\UploadedFile;
/**
* 百度umeditor上傳
*/
public function actionUmUpload ()
{
$model = new Upload();

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

$model->file = UploadedFile::getInstance($model, 'file');

$dir = ‘文件保存目錄';
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: The state in the $info information returned above can only be SUCCESS, which is case-sensitive