uniapp把editor 组件生成的富文本回显

在 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 为例)

  1. 下载此 css
  2. 将里面的标签名改为类名,如 .ql-container img 改为 .ql-container .img
  3. 在页面中引入修改后的css
  4. 标签结构如下<view class="ql-container"> <u-parse class="ql-editor" :content="article" @preview="preview" @navigate="navigate" ></u-parse> </view>

在 web 页面中使用

  1. 在 html 页面中引入此 css
  2. 将 editor 组件导出的 html 内容放入如下标签结构中复制代码<div class="ql-container"> <div class="ql-editor" > editor 组件导出的 html <div/> <div/>

原创文章,作者:Uniapper,如若转载,请注明出处:https://www.uniapper.com/571.html

(4)
打赏 微信扫一扫 微信扫一扫
上一篇 2021年11月13日 下午12:18
下一篇 2021年11月13日 下午11:27

相关推荐

发表回复

登录后才能评论
欢迎访问www.uniapper.com!交流QQ群:35429521