富文本图片样式自适应

原创

已于 2022-09-01 15:37:23 修改 · 550 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2022-07-29 16:44:25 首次发布

该博客介绍了如何处理富文本中的样式，包括各种元素如h1到h6, p, b, strong, code, img, blockquote, li, table等的样式定义，以及针对图片溢出问题的解决策略。通过使用正则表达式和预定义的样式规则，实现了对HTML标签的格式化，确保图片最大宽度不超过100%，从而防止布局混乱。

前提

问题:

富文本导致图片溢出

封装成工具(tools)


var graceRichTextReg;

var GRT = [
	// div 样式
	['div', "line-height:2em;"],
	// h1 样式
	['h1', "font-size:3em; line-height:1.5em;"],
	// h2 样式
	['h2', "font-size:2em; line-height:1.8em;"],
	// h3 样式
	['h3', "font-size:1.6em; line-height:2em;"],
	// h4 样式
	['h4', "font-size:1.2em; line-height:2em;"],
	// h5 样式
	['h5', "font-size:1em; line-height:2em;"],
	// h6 样式
	['h6', "font-size:0.9em; line-height:2em;"],
	// p 样式
	['p', "font-size:1em; line-height:2em;"],
	// b 样式
	['b', "font-size:1em; line-height:2em;"],
	// strong 样式
	['strong', "font-size:1em; line-height:2em;"],
	// code 样式
	['code'<