小程序editor富文本编辑使用及rich-text解析富文本

今天尝试了下在小程序中使用editor富文本编辑，然后再详情页使用rich-text来解析富文本html。

首先先下载editor组件，并放到项目目录中，（组件下载地址）

文件存放后，打开richText.wxml可以根据需求修改代码，richText.js同理。

然后在需要的json文件中引入

"usingComponents": {"richText":"../../components/richText/richText"
},

在需要的wxml中使用组件

<richText id='richText' readOnly='{{readOnly}}'placeholder='{{placeholder}}' formatDate='YY/MM/DD'buttonTxt='保存'bind:clearBeforeEvent='clearBeforeEvent'bind:clearSuccess='clearSuccess'bind:undo='undo'bind:restore='restore'bind:onEditorReady='onEditorReady' bind:bindfocus='bindfocus' bind:bindblur='bindblur' bind:bindinput='bindinput' bind:insertImageEvent='insertImageEvent' bind:getEditorContent='getEditorContent'></richText>

这里说下组件的方法及属性

readOnly 编辑器是否只读

clearBeforeEvent 清空编辑器内容之前的回调

clearSuccess 清空编辑器内容成功时回调

undo 撤销内容成功时回调

restore 恢复内容成功时回调

onEditorReady 编辑器初始化完成时回调，可以获取组件实例

bindfocus 编辑器聚焦时触发

bindblur 编辑器失去焦点时触发

bindinput 编辑器输入中时触发，实时返回富文本内容

insertImageEvent 插入图片按钮点击时回调

getEditorContent 保存按钮点击时回调，返回富文本内容

这就是小程序中的富文本编辑器：

接下来我们说下，当在富文本编辑器中录入好信息并提交到云数据库中，如何在详情页中查询并显示数据，这时候我们就要用到官方给提供的rich-text组件了。大家可以去官方文档中去看下该组件的详细属性（传送门）。

在详情页获取数据之前，我们先看下在富文本编辑器提交给云数据库的数据格式，

我们要的是html格式的，用rich-text组件来解析。在看看详情页中该如何查询数据并渲染到页面

<view class="warp"><view class="details"><view class="detailsContent"><rich-text nodes="{{html}}" ></rich-text></view></view>
</view>

const db = wx.cloud.database();//调用默认云环境的数据库引用
const app = getApp();
Page({data: {details:{}},onLoad: function(options) {let that=this;db.collection("details").doc(options.id).get().then(res=>{//首先获取数据集合，查询数据，  console.log("详情数据:",res.data)this.setData({html: res.data[0].html.replace('<img ', '<img style="max-width:100%;height:auto;"'),})})},
})

大家可能看到在后面中追加了.replace('<img ', '<img style="max-width:100%;height:auto;"'),这个是针对在富文本中添加的图片，默认会很大。这样设置的话，图片就可以适配了。

这就是在详情页中的效果：

小程序editor富文本编辑使用及rich-text解析富文本相关推荐

小程序editor 富文本编辑器组件
效果: 关于editor 富文本编辑器组件复制到组件common 里面.json 引用即可链接:https://pan.baidu.com/s/1_QIp28IOVuyVFfKfFZwxKQ 提取 ...
云开发小程序editor富文本编辑器上传图片实现增删改
在做一个博客小程序,用的是云开发,用editor编辑器上传图片,一开始直接传图片会出现真机不显示的情况,排查原因后发现是因为传入的是本地路径,而小程序要求的是https或者云id,于是做了以下修改:先 ...
Rich Text Processing富文本处理
Scribe框架提供一系列读和控制富文本文档的类.Qt4提供像QTextDocument类,他能够为开发提供创建和修改结构的富文本文档. 文档内的信息通过两个补充的接口存取: 1. 基于光标的接口用来 ...
富文本编辑_博客的后台富文本编辑和阅读计数
哈喽,大家好呀,我是滑稽君.本期我们为博客加上分类统计功能.后台富文本编辑功能.和阅读计数功能.那么我们先说说富文本编辑器是什么. 富文本编辑器,Rich Text Editor, 简称 RTE, 它 ...
微信小程序中WebView中原生组件限制问题解析
背景在微信的文档中有一个章节说明了『原生组件的使用限制』有这么一段话『由于原生组件脱离在 WebView 渲染流程外,因此在使用时有以下限制:原生组件的层级是最高的,所以页面中的其他组件无论设 ...
小程序真机测试「启动参数」解析出错问题
写小程序2年了前两天才碰到的这个问题以前没出错过话不多说直接上图 1.小程序 - 启动参数图例 2 2.微信开发者工具-模拟器输出参数-正常图例这是没问题! 3.真机测试-输出参数-错误 ...
微信小程序video组件调用腾讯视频的解析
1.首先我们从腾讯视频网站上找到一个视频网页的连接,格式是这样的 https://v.qq.com/x/page/b0136et5ztz.html 上面我加粗的是视频的vid 2.我们把vid放到接口 ...
小程序中输入框input的type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
微信小程序获取定位后使用腾讯地图解析到市位置
微信小程序获取定位解析当前城市位置咱们就话不多说,这呢是我第一次发布文章,第一次使用,所以使用的也比较简单,也还不是很熟悉,接下来呢就直接上代码吧,希望喜欢的朋友可以关注关注嘿嘿首先我们需要引入腾 ...

小程序editor富文本编辑使用及rich-text解析富文本

小程序editor富文本编辑使用及rich-text解析富文本相关推荐

最新文章

热门文章