1. Preface
Sometimes the rich text content returned directly by the back end will appear to be too large or too small when displayed on the front end, so it needs to be processed. It is not difficult to implement. The main thing is to use the replace method to globally replace the style of the image img tag and modify it. Its width style.
2. Realization
1. The replace method globally adds the style of the image img tag.
let txt = 'xxx' //富文本内容
txt = txt.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
After understanding, replace whatever you want to replace.
2. Page label display:
<rich-text class="notice-content" nodes="{
{txt}}">
</rich-text>
The above is enough.
I recommend a small program rich text component to you, mp-html. It can make rich text images adaptive, and you can also click on the preview to enlarge the image. It is very easy to use. People should use tools 23333
official website——>
3. Summary
That’s all
Hhh, no one should say that my article is stupid. . .
It’s been 3 years, it’s been 3 years! The epidemic is finally coming to an end. I cried, brothers. It has been so uncomfortable for the past three years.
Not much more to say, I’m going to travel alone, so take advantage of your youth and do it now! Release all the suppressed emotions and find inner peace. The visa has been processed and the flight tickets for Saturday have been booked!
After you come back, think carefully about the next road.
My Bilibili Space
Gitee warehouse address: All special effects source code
Other articles:
~Follow me to see more simple creative special effects:
text smoke effect html+css+js
surround reflection loading special effect html+css
bubble floating background special effect html+css
simple Clock special effect html+css+js
cyberpunk style button html+css
imitation NetEase Cloud official website carousel image html+css+js
water wave loading animation html+css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D Three-dimensional photo album html+css
neon drawing board effect html+css+js
note some css attribute summary (1)
Sass summary note
... Wait and
go to my homepage to see more~