uniapp小程序中富文本中table的处理

说明:

1.vue后台上传数据的是使用的百度富文本编辑器:

百度富文本编辑器文档:http://fex.baidu.com/ueditor/#start-config
下载ueditor官网:http://ueditor.baidu.com/website/download.html

2.Uniapp框架的小程序,显示使用的是小程序富文本插件Parser,

下载使用地址:https://github.com/jin-yufeng/Parser

3.页面效果图展示:

4.页面代码片段图片展示:

5.代码:

5.1 页面标签中使用:

<jyfParser :html="formatTable(lawsDetail.courseText)"></jyfParser>

5.2 methods方法中:

正则替换,处理富文本的样式

//富文本table的处理
		formatTable(content){
			if(content){
				content = content.replace(/<br[^>]*\/>/gi, '');
				content = content.replace(/<td[^<>]*>/ig, '<td style="padding:0px;height:auto;word-break:break-all;">');
				content = content.replace(/<td[^<>]*>\s*?<p>/ig, '<td>');
				content = content.replace(/<table[^>]*>/gi, '<table cellpadding="0" cellspacing="0" max-width="100%" border="1" style="font-size:12px;max-width:100%; text-align:left;text-indent: 0em;line-height:12px;"'); 
				return content;
			}else{
				return null;
			}
		},

 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页