layedit rich text, image size limit perfect solution

Recently the use of rich text layedit, but the emergence of a small problem, after image upload, image size is not limited, which leads, when the image is too large will be the editor, the picture will be shown only partially, but when the show page when rendering, the picture is in accordance with the proportion of the original show, this is not what we want.

So I looked at some of the blog, there are two major reform law:

1. Modify the layedit.js img style

Search "" in the js img{display: inline-block, "here is actually put that, layedit editor pictures css styles, then we add a style:" max-width:95%"
Here Insert Picture Description
Then look at the effect of it, the editor, does limit of 95%
Here Insert Picture Description
but then, this is just editor, when the front page show, sorry, this is not a (big picture I shrink the browser's result), this is not what I want, what I want is a picture in the editing and display of all times with this style
Here Insert Picture Description

One solution is inappropriate, then we look at another bar.

2. Modify uploadImage method of layedit.js

Search js in "uploadImage" keyword, and then look for "src: e.data.src, alt: e.data.title " keyword, and then add " width:'100'" appears under the icon,
Here Insert Picture Description
but this case, there is a problem, If I upload the picture itself is not very large, then this might force will stretch the image,

This is not the result I wanted.

3. Personal feeling perfect way

src, alt attributes are img, then I add style it?

style:"max-width:95%"

Try it
Here Insert Picture Description
results came out:
Here Insert Picture Description
look at the front show:
Here Insert Picture Description
Here Insert Picture Description
last glance at the data inventory:
Here Insert Picture Description

Well results achieved, not only limits the big picture in the editing and display, and no small influence diagram

Finally tell you, methods of operation:

layedit.js, search for src:e.data.src,alt:e.data.title" ", followed by the

,style:"max-width:95%"

To a maximum width limit value according to your needs.

Published 22 original articles · won praise 15 · views 30000 +

Guess you like

Origin blog.csdn.net/niaoer2010/article/details/104413511