很多开发者在使用rich-text组件与editor组件会遇到这样的问题：希望通过rich-text组件按editor组件编辑时呈现的样式渲染出来。但直接用rich-text组件渲染的话，有些样式明显不一样。尤其是有序列表、无序列表、check-list等。

那是因为官方rich-text组件与editor组件是相互独立的。也就是说直接用rich-text组件渲染editor组件获取的html，可能跟想要的结果有差距

这篇文章主要就是告你开发者，怎么消除这些差距。

只需要做到两点就能渲染出想要的结果

1、节点结构

要想得到想要的结果，节点结构必须是下面这样的结构

<view class="ql-container">
  <view class="ql-editor">
    <rich-text nodes="{{html}}"></rich-text>
  </view>
</view>

2、给 .ql-container 做样式调整

.ql-container {
  display: block;
  position: relative;
  box-sizing: border-box;
  -webkit-user-select: text;
  user-select: text;
  outline: none;
  overflow: hidden;
  width: 100%;
  height: auto;
  min-height: 50px !important;
}