在 uni-app 中使用
在 editor 组件显示
使用EditorContext.setContents接口设置内容即可
在 rich-text 组件显示
设置 nodes 属性值为 editor 组件导出的 html 即可,若想和 editor 组件样式保持一致可以需要给 rich-text 组件和其父级组件设置对应的 class,如:
<view class="ql-container">
<rich-text class="ql-editor" :nodes="html"></rich-text>
</view>
使用插件解析 html(以 u-parse 为例)
- 下载此 css
- 将里面的标签名改为类名,如
.ql-container img
改为.ql-container .img
- 在页面中引入修改后的css
- 标签结构如下
<view class="ql-container"> <u-parse class="ql-editor" :content="article" @preview="preview" @navigate="navigate" ></u-parse> </view>