How to set the style after uploading pictures in Baidu ueditor

UEditor is a WYSIWYG rich text web editor developed by Baidu web front-end R&D department. It is lightweight, customizable, and focuses on user experience. It is open source based on the MIT license and allows free use and modification of code, covering popular rich text editors. Special functions, original and multiple new editing operation modes.

Let's take a look at how UEditor will modify the image style during content display after uploading the image. But emoticons are also img tags, so global modification is problematic.

So I can only start modifying the plug-in code.

First find the server segment file where the image is uploaded. Here is mainly an explanation of PHP

Find line 337 of Uploader.class.php in the php directory

public function getFileInfo()
   {
       return array(
           "state" => $this->stateInfo,
           "url" => $this->fullName,
           "title" => $this->fileName,
           "original" => $this->oriName,
           "type" => $this->fileType,
	   "class"=> "aaa"
           "size" => $this->fileSize，

       );
   }

The json returned in this way has one more value of the class attribute

​

One is to modify js

Find the following code 24461 in ueditor.all.js

Modify js

function callback(){
try{
var link, json, loader,
body = (iframe.contentDocument || iframe.contentWindow.document).body,
result = body.innerText || body.textContent || '';
json = (new Function("return " + result))();
link = me.options.imageUrlPrefix + json.url;
if(json.state == 'SUCCESS' && json.url) {
loader = me.document.getElementById(loadingId);
loader.setAttribute('src', link);
loader.setAttribute('_src', link);
loader.setAttribute('class', json.class || ''); //添加行代码
loader.setAttribute('title', json.title || '');
loader.setAttribute('alt', json.original || '');
loader.removeAttribute('id');
domUtils.removeClasses(loader, 'loadingclass');
} else {
showErrorLoader && showErrorLoader(json.state);
}
}catch(er){
showErrorLoader && showErrorLoader(me.getLang('simpleupload.loadError'));
}
form.reset();
domUtils.un(iframe, 'load', callback);
}

​

In this way, when you upload a picture, you can see that the uploaded pictures have additional styles.

The above introduces how to set the style after uploading images in Baidu ueditor, including the content of Baidu ueditor. I hope it will be helpful to friends who are interested in PHP tutorials.