Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to solve the yii2 integration of Baidu editor umeditor and umeditor picture upload problem", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to solve the yii2 integration of Baidu editor umeditor and umeditor picture upload problem" this article.

How the Yii2 framework integrates Baidu editor umeditor.

What is umeditor? I've only heard of ueditor. Is your umeditor pirated Dongdongran? Umeditor, to put it bluntly, is the mini version of ueditor. According to Baidu's official statement, it is actually the "short and soft small" in the editor, but it is fully functional. Ahem, let's get back to business.

First of all, let's go to the official website to download a mini version of ueditor umeditor, note that it is umeditor.

Download it and unzip it and put it in the / css directory under the root directory of the project and name it umeditor. The specific location is whatever you want, as long as it can be referenced later.

The second step, let's first expand the backend\ assets\ Appset class. Oh, my God, why do you want to expand such a thing? how does it have anything to do with our umeditor integration? kill a Cheng Yaojin on the way. The intention of extending this class file here is to facilitate the introduction of css js file drops in the file.

Quite simply, add the following two methods to the Appset method

/ / define the JS method for loading on demand, note that the loading order is at the end of public static function addScript ($view, $jsfile) {$view- > registerJsFile ($jsfile, [AppAsset::className (), 'depends' = >' backend\ assets\ AppAsset']);} / / defines the css method for loading on demand, and note that the loading order is public static function addCss ($view, $cssfile) {$view- > registerCssFile ($cssfile, [AppAsset::className (), 'depends' = > backend\ assets\ AppAsset']);}

Next, follow the configuration below.

To explain first, here we assume that there is an article article table and a content content field that needs to be displayed as a Baidu editor.

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

This file introduces the Appset class and the related 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

$(function () {var um = UM.getEditor ('article-content', {});})

As for how to use article-content, this is the target object we want to bind, that is, content. Article-content is the current id identity of the object.

Ok, to this Baidu editor is basically integrated, now hurry to add an article to try it, remember to update to see if there is also content in the editor.

The following is to introduce yii2 to solve the problem of uploading pictures in Baidu editor umeditor.

The yii2 framework integrates the Baidu editor, because the file upload uses the UploadedFile that comes with yii2, so it is inevitable that the umeditor upload is not successful. Only two steps are needed to solve the problem. Let's take a look at the specific implementation.

First of all, let's do a good job in the configuration of umeditor. Here, we only need to change the imageUrl configuration item, which points to / tools/um-upload.

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

According to the implementation of ueditor, we only need to return the success information after uploading successfully.

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: the state status in the $info information returned above can only be SUCCESS, which is case-sensitive

The above is all the contents of this article "how to solve the problem of yii2 integrating Baidu editor umeditor and umeditor picture upload". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.