概述:在后台富文本编辑器中编辑了富文本,要求在app里面呈现;
1、分析富文本数据,通过富文本编辑后的文本数据格式如下:
<p style="text-indent: 0px; line-height: 2em;"><strong><span style="font-family: '等线 Light';letter-spacing: 0;font-size: 10px"><span style="font-family:等线 Light"><img src="/ue/2019-06-12/6CFFB1F9FAE64946AFC177E3468856FB.jpg" title="" alt="20161015234335_71.jpg" />锁定期</span>2019-06-13至2019-06-22</span></strong></p> <p style="text-indent: 0px; line-height: 2em;"><strong><span style="font-family: '等线 Light';letter-spacing: 0;font-size: 10px">2019-06-23日 00:00期满自动转入活期。</span></strong></p> <p style="text-indent: 0px; line-height: 2em;"><strong><span style="font-family: '等线 Light';letter-spacing: 0;font-size: 10px"><span style="font-family:等线 Light">提前转出若未超过认购产品理财期限的</span>1/2,</span></strong><strong><span style="font-family: '等线 Light';color: rgb(221, 57, 46);letter-spacing: 0;font-size: 10px"><span style="font-family:等线 Light">则不获得收益。超过认购产品理财期限的</span>1/2,</span></strong><strong><span style="font-family: '等线 Light';letter-spacing: 0;font-size: 10px"><span style="font-family:等线 Light">获得已履行理财天数应得收益的</span>10%。</span></strong></p> <p style="text-indent: 0px; line-height: 2em;"><strong><span style="font-family: '等线 Light';letter-spacing: 0;font-size: 10px"><img src="/ue/2019-06-12/FE3DE97BB45B47228B5BE2248BA67B8D.jpg" title="" alt="20161015234335_71.jpg" width="164" height="151" /></span></strong></p> <p style="margin: 0px; text-indent: 0px; text-align: left;"><br /></p>
观察发现
1) 其中没有<html> <body></body></html>标签;
2) 图片资源路径是相对路径
2、用webView对富文本内容进行渲染
webView.loadDataWithBaseURL( Constant.ApiConstant.API_SERVER_URL_IMAGE, Constant.getHtmlData(bodyHTML), "text/html", "utf-8", null)
其中:
bodyHTML:富文本内容
Constant.ApiConstant.API_SERVER_URL_IMAGE为图片资源的baseUrl,例如:http://192.168.100.233:9090,配置了此baseUrl,在加载图片时,图片的路径为:baseUrl+图片的相对路径
Constant.getHtmlData(bodyHTML)的代码如下
public static final String linkCss = "<link rel="stylesheet" href="file:///android_asset/reset.css" type="text/css">"; public static String getHtmlData(String bodyHTML) { String head = "<head>" + "<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> " + "<style>img{max- 100%; auto; height:auto!important;}</style>" + linkCss + "</head>"; return "<html>" + head + "<body>" + bodyHTML + "</body></html>"; }
其中linkCss 为重置样式,可将此样式文件放在asset文件中,reset.css的代码如下:
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% } html * { outline: 0; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0,0,0,0) } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin: 0; padding: 0; font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; } input,select,textarea { font-size: 100% } table { border-collapse: collapse; border-spacing: 0 } fieldset,img { border: 0 } abbr,acronym { border: 0; font-variant: normal } del { text-decoration: line-through } address,caption,cite,code,dfn,em,th,var { font-style: normal; font-weight: 500 } ol,ul { list-style: none } caption,th { text-align: left } h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 500 } q:before,q:after { content: '' } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } ins,a { text-decoration: none } [v-cloak] { display: none; } a { color: $--font-color; text-decoration: none; outline: none; blr: "expression(this.onFocus=this.blur())"; } a:hover, a:active, a:focus { text-decoration:none; outline: none; } /*float*/ .clear { clear: both; display: block; font-size: 0; height: 0; line-height: 0; overflow: hidden; } .clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; } .clearfix { zoom: 1; } html,body{ height: 100%; color: $--font-color; -webkit-overflow-scrolling: touch; } html,body,#app{ 100%; min-height: 100%; position: relative; background-color: $--border-light-color; } #app{ // $--all-width; margin: 0 auto; overflow: hidden; background-color: $--body-background-color; } .placeholder{ color: $--grey; } :-moz-placeholder{ @extend .placeholder; } ::-moz-placeholder{ @extend .placeholder; } :-ms-input-placeholder{ @extend .placeholder; } ::-webkit-input-placeholder{ @extend .placeholder; } ::-webkit-scrollbar{ 8px; height: 8px; } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { background-color: $--grey-light; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: $--grey-light; } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { background-color: transparent; }
3、打包运行,在chrome://inspect/运行的效果图如下