DCloud_UNI_GSQ
DCloud_UNI_GSQ
  • 发布:2019-07-27 17:27
  • 更新:2023-09-05 14:49
  • 阅读:24873

使用 editor 组件导出的 html

分类:uni-app

在 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/>
0 关注 分享

要回复文章请先登录注册

2***@qq.com

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
1***@qq.com

1***@qq.com

加了css,改了css文件,加了标签还有class,还是没效果
2022-10-27 13:34
1***@qq.com

1***@qq.com

回复 DCloud_UNI_GSQ :
更新在哪?还是没有啊
2021-07-16 21:19
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 1***@qq.com :
更新了
2020-03-20 16:22
1***@qq.com

1***@qq.com

css找不到了
2020-03-20 14:37
叶凌风

叶凌风

回复 c***@vip.qq.com :
看看官方文档的函数调用就知道了
2020-02-24 14:09
小涵

小涵

回复 DCloud_UNI_GSQ :
https://ask.dcloud.net.cn/question/84879
2019-12-12 11:18
小涵

小涵

回复 DCloud_UNI_GSQ :
收到,感谢。
你可否移步,看一下这个问题怎么解决呢?
2019-12-12 10:57
DCloud_UNI_GSQ

DCloud_UNI_GSQ (作者)

回复 小涵 :
ok 了,已更换
2019-12-12 10:50
小涵

小涵

CSS 链接打不开啦????
2019-12-12 10:43