webView渲染富文本

概述：在后台富文本编辑器中编辑了富文本，要求在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/运行的效果图如下

ggband