概述：在后台富文本编辑器中编辑了富文本，要求在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-width: 100%; width: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{ width: 100%; min-height: 100%; position: relative; background-color: $--border-light-color; } #app{ // width: $--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{ width: 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; }
chrome://inspect/运行的效果图如下
