Processing of images in the HTML editor

When using HTML editors such as UEditor, if the size of the image in the article exceeds the size specified by the element, the image is displayed beyond the element range, making the page layout messy, in this case, jQuery can be used to process the images and display methods in the article to control the image display size and display mode.

The following are jQuery JS files and jQuery UI introduction files.
[Html]
<Link rel = "stylesheet" type = "text/css" href = "css/custom-theme/jquery-ui-1.8.23.custom.css"/>
<Script type = "text/javascript" src = "js/jquery-1.8.0.min.js"> </script>
<Script type = "text/javascript" src = "js/jquery-ui-1.8.23.custom.min.js"> </script>

The following layers are used to display images in files:
[Html]
<Div id = "picDlg" title = "image display" style = "display: none;"> </div>

The following code controls Image Display and usage
[Html]
$ (". BodyLeft img"). load (function (){
W = $ (this). width ();
H = $ (this). height ();
T = $ (this). attr ("title ");
Src = $ (this). attr ("src ");
$ (This). width (w & gt; 400? 400: w );
$ (This). height (w & gt; 400? (400/w) * h: h );
Vertex (this).css ("cursor", "pointer ");
$ (This). click (function (){
$ ("# PicDlg" ).html ("Width: "auto ",
Height: "auto ",
Title: t,
Modal: true,
Draggable: false,
Resizable: false
})
})
})