使用 editor 组件导出的 html

分类：uni-app

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 为例）

下载此 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>

在 web 页面中使用

在 html 页面中引入此 css

将 editor 组件导出的 html 内容放入如下标签结构中

<div class="ql-container">  
<div class="ql-editor" >  
    editor 组件导出的 html  
<div/>  
<div/>

0 赞关注分享

11 个评论

要回复文章请先登录或注册

2***@qq.com

uniapp 在转微信小程序之后上传图片，通过getContents 获取 res.html 中img 标签src 内容不是wx 的临时文件路径而是base64 请问怎么解决
``` this.editorCtx.getContents({
success: (res) => {
debugger;
console.log("save = >", res);
res.html = handleHtmlImage(res.html, tsrue);

console.log("after save = >", res);
this.$emit("save", res);
// uni.showToast({
// title: '保存成功',
// icon: 'none'
// });
},
complete: (res) => {
// console.log("getContents complete");
},
}); ```

2023-09-05 14:49