Introduction to customizing style class names after uploading images using Ueditor

Ueditor is a rich text plug-in from Baidu. If the user knows the front-end language, the applicability is very good, especially in the current situation of mobile terminals. But often users do not understand programming, and it is impossible to let them use the front-end language. This requires us to define the entire style during development.

Under normal circumstances, the width and height of the image we upload are fixed. If we want to apply it to the mobile terminal, we must define the width as 100%, or Add a class and we can customize it. This is our thinking.

The following is the modified code:

ueditor.all.js

UE.plugin.register('simpleupload', function (){

...

function initUploadBtn(){

...

domUtils.on(btnIframe, 'load', function(){

...

domUtils.on(input, 'change', function(){

...

me.execCommand('inserthtml', 'class" id="' + loadingId + '" src="' + me.options. themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >' );//It is said on the Internet that you can add custom styles here. If you try it, you will get an error ueditor.all.js: #24461 Line

##me.execCommand('inserthtml', 'width="291" height="164"+'"style="width: 291px; height: 164px;"> ');

function callback(){

...

　　　　domUtils.set Style(loader, 'width', '100%');//Set controlstyle style#24527

...

domUtils .addClass(loader, 'custom style class name');//It is a built-in method that can be implemented#24534

...

}

...

})

...

})

...

}

...

})

When setting style, you must also modify usditor.config.js

(function(){

...

window.UEDITOR_CONFIG = {

...

// xss filter whitelist List source: http://www.php.cn/

,whitList: {

...

img: ['src ', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'style'],//Add filter whitelist style#403

...

}

...

}

...

})

The above is the detailed content of Introduction to customizing style class names after uploading images using Ueditor. For more information, please follow other related articles on the PHP Chinese website!