概述：在后台富文本編輯器中編輯了富文本，要求在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;
}
3、打包運行,在chrome://inspect/運行的效果圖如下
