Explorar el Código

富文本显示表格样式

zs hace 8 meses
padre
commit
1959fdc728

+ 19 - 0
pagesMy/about/index.vue

@@ -29,6 +29,25 @@
 			// 处理富文本
 			formatRichText(html) {
 				if (html) {
+					html = html.replace(/<table[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi, `style="border-collapse: collapse; width: 100%;"`)
+							.replace(/<table/gi, `<table style="border-collapse: collapse; width: 100%;"`);
+					});
+					html = html.replace(/<th[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`);
+					});
+					html = html.replace(/<td[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px;"`);
+					});
 					// 富文本内容格式化
 					return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
 						// 查找所有的 img 元素

+ 20 - 1
pagesMy/activity/detail.vue

@@ -286,6 +286,25 @@
 			// 处理富文本
 			formatRichText(html) {
 				if (html) {
+					html = html.replace(/<table[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi, `style="border-collapse: collapse; width: 100%;"`)
+							.replace(/<table/gi, `<table style="border-collapse: collapse; width: 100%;"`);
+					});
+					html = html.replace(/<th[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`);
+					});
+					html = html.replace(/<td[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px;"`);
+					});
 					// 富文本内容格式化
 					return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
 						// 查找所有的 img 元素
@@ -294,7 +313,7 @@
 						// 删除找到的所有 img 元素中的 style 属性
 					}).replace(/\<img/gi, '<img style="width:100%;"') // 对 img 元素增加 style 属性,并设置宽度为 100%
 				}
-			}
+			},
 		}
 	}
 </script>

+ 19 - 0
pagesMy/agree/index.vue

@@ -29,6 +29,25 @@
 			// 处理富文本
 			formatRichText(html) {
 				if (html) {
+					html = html.replace(/<table[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi, `style="border-collapse: collapse; width: 100%;"`)
+							.replace(/<table/gi, `<table style="border-collapse: collapse; width: 100%;"`);
+					});
+					html = html.replace(/<th[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`);
+					});
+					html = html.replace(/<td[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px;"`);
+					});
 					// 富文本内容格式化
 					return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
 						// 查找所有的 img 元素

+ 19 - 0
pagesMy/contact/index.vue

@@ -58,6 +58,25 @@
 			// 处理富文本
 			formatRichText(html) {
 				if (html) {
+					html = html.replace(/<table[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi, `style="border-collapse: collapse; width: 100%;"`)
+							.replace(/<table/gi, `<table style="border-collapse: collapse; width: 100%;"`);
+					});
+					html = html.replace(/<th[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;"`);
+					});
+					html = html.replace(/<td[^>]*>/gi, match => {
+						// 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+						return match.replace(/style="[^"]+"/gi,
+								`style="border: 1px solid #ddd; padding: 8px;"`)
+							.replace(/<table/gi,
+								`<table style="border: 1px solid #ddd; padding: 8px;"`);
+					});
 					// 富文本内容格式化
 					return html && html.replace(/<img[^>]*>/gi, function(match, capture) {
 						// 查找所有的 img 元素

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 1 - 1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesMy/about/index.js.map


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 1 - 1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesMy/activity/detail.js.map


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 1 - 1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesMy/agree/index.js.map


La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 1 - 1
unpackage/dist/dev/.sourcemap/mp-weixin/pagesMy/contact/index.js.map


+ 12 - 0
unpackage/dist/dev/mp-weixin/pagesMy/about/index.js

@@ -200,6 +200,18 @@ var _default = {
     // 处理富文本
     formatRichText: function formatRichText(html) {
       if (html) {
+        html = html.replace(/<table[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border-collapse: collapse; width: 100%;\"").replace(/<table/gi, "<table style=\"border-collapse: collapse; width: 100%;\"");
+        });
+        html = html.replace(/<th[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"");
+        });
+        html = html.replace(/<td[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px;\"");
+        });
         // 富文本内容格式化
         return html && html.replace(/<img[^>]*>/gi, function (match, capture) {
           // 查找所有的 img 元素

+ 12 - 0
unpackage/dist/dev/mp-weixin/pagesMy/activity/detail.js

@@ -420,6 +420,18 @@ var _default = {
     // 处理富文本
     formatRichText: function formatRichText(html) {
       if (html) {
+        html = html.replace(/<table[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border-collapse: collapse; width: 100%;\"").replace(/<table/gi, "<table style=\"border-collapse: collapse; width: 100%;\"");
+        });
+        html = html.replace(/<th[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"");
+        });
+        html = html.replace(/<td[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px;\"");
+        });
         // 富文本内容格式化
         return html && html.replace(/<img[^>]*>/gi, function (match, capture) {
           // 查找所有的 img 元素

+ 12 - 0
unpackage/dist/dev/mp-weixin/pagesMy/agree/index.js

@@ -200,6 +200,18 @@ var _default = {
     // 处理富文本
     formatRichText: function formatRichText(html) {
       if (html) {
+        html = html.replace(/<table[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border-collapse: collapse; width: 100%;\"").replace(/<table/gi, "<table style=\"border-collapse: collapse; width: 100%;\"");
+        });
+        html = html.replace(/<th[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"");
+        });
+        html = html.replace(/<td[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px;\"");
+        });
         // 富文本内容格式化
         return html && html.replace(/<img[^>]*>/gi, function (match, capture) {
           // 查找所有的 img 元素

+ 12 - 0
unpackage/dist/dev/mp-weixin/pagesMy/contact/index.js

@@ -220,6 +220,18 @@ var _default = {
     // 处理富文本
     formatRichText: function formatRichText(html) {
       if (html) {
+        html = html.replace(/<table[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border-collapse: collapse; width: 100%;\"").replace(/<table/gi, "<table style=\"border-collapse: collapse; width: 100%;\"");
+        });
+        html = html.replace(/<th[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px; background-color: #f2f2f2;\"");
+        });
+        html = html.replace(/<td[^>]*>/gi, function (match) {
+          // 如果已有 style 属性,替换为新的样式;如果没有,添加新的 style 属性
+          return match.replace(/style="[^"]+"/gi, "style=\"border: 1px solid #ddd; padding: 8px;\"").replace(/<table/gi, "<table style=\"border: 1px solid #ddd; padding: 8px;\"");
+        });
         // 富文本内容格式化
         return html && html.replace(/<img[^>]*>/gi, function (match, capture) {
           // 查找所有的 img 元素