小程序-富文本编辑框的注意事项

富文本编辑框官网位置

表单组件 / editor (qq.com)icon-default.png?t=N7T8https://developers.weixin.qq.com/miniprogram/dev/component/editor.html

(一)富文本编辑框的作用

        1.适用于一些表单的提交
        2.这些表单内容需要自定义图片大小,编辑文字样式

        主要用到的是 <editor></editor> 标签,富文本编辑框比较自由,可以自行编写自己想要的效果与 icon。

(二)富文本编辑框的注意事项

        1.进入表单填写页面自动聚焦问题

     首先将富文本编辑框设置为只读,赋完初值再将富文本设置可编辑状态即可。

onEditorReady() {const that = this;wx.createSelectorQuery().select('#editor').context(function (res) {that.editorCtx = res.contextthat.editorCtx.setContents({html: '获取到的表单数据',success: function () {that.setData({readOnly: 0})console.log('insert html success')}})that.editorCtx.blur()}).exec()
},
         2.键盘上变得编辑组件不显示问题

        需要调整样式,确保编辑组件的展示位置正确

        3.无法监听键盘高度变化

        在onLoad开启监听键盘高度变化的监听事件即可。

onLoad(){const platform = wx.getSystemInfoSync().platformconst isIOS = platform === 'ios'this.setData({isIOS})this.updatePosition(0)let keyboardHeight = 0wx.onKeyboardHeightChange(res => {console.log(res)if (res.height === keyboardHeight) return//不需要滚动可将滚动api注释掉/* const duration = res.height > 0 ? res.duration * 1000 : 0 */keyboardHeight = res.height that.updatePosition(keyboardHeight)/* setTimeout(() => {wx.pageScrollTo({scrollTop: 0,success() {that.updatePosition(keyboardHeight)that.editorCtx.scrollIntoView()}})}, duration) */})  
}updatePosition(keyboardHeight) {const toolbarHeight = 50const {windowHeight,platform} = wx.getSystemInfoSync()//这里可以进行计算编辑组件显示的位置console.log(windowHeight)/*  let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight */this.setData({/* editorHeight, */keyboardHeight})console.log(this.data.editorHeight,this.data.keyboardHeight)
}
        4.关于 iOS 页面上推问题

        官方中文文档中包含对应解决方案

        思路为:根据 editor 键盘弹起,动态调整 editor 的高度,由于 iOS 会上推页面,所以在上推完成(可以通过键盘高度变化的 duration 拿到时间)时直接滚动页面到顶部: wx.pageScrollTo({ scrollTop: 0 })最终的效果是页面会先上推,后会弹,光标可以始终保持可见。(可能会有抖动,目前没有发现更好的解决办法)

最后,其他的功能都可以按照官网上的去实现,基本开发够用的! 

相关内容:

mp-html  

新富文本组件 | 微信开放社区 (qq.com)

quill 编辑器(源头)

Quill - Your powerful rich text editor (quilljs.com)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20384.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】10.list

list这个迭代器是双向迭代器&#xff0c;与vector的迭代器具有很大的区别&#xff0c;主要在于双向迭代器不支持&#xff0b;- 操作 正由于list的双向迭代器&#xff0c;因此<algorithm>中的sort()函数无法使用&#xff0c;list单独实现了一个sort()函数&#xff0c;但效…

统计信号处理基础 习题解答10-5

题目 通过令 并进行计算来重新推导MMSE估计量。提示&#xff1a;利用结果 解答 首先需要明确的是&#xff1a; 上式是关于观测值x 的函数 其次需要说明一下这个结果 和教材一样&#xff0c;我们用求期望&#xff0c;需要注意的是&#xff0c;在贝叶斯情况下&#xff0c;是个…

创刊即王炸?首个IF近7分,稳坐中科院1区!同领域全球第一!

【欧亚科睿学术】 01 期刊基本概况 【期刊类型】经济类SSCI 【出版社】SPRINGER出版社 【期刊概况】IF&#xff1a;8.0-9.0&#xff0c;JCR1区&#xff0c;中科院1区 【版面类型】正刊&#xff0c;仅少量版面 【预警情况】2020-2024年无预警记录 【收录年份】2016年被WO…

Facebook开户|Facebook做落地页的标准和建议

哈喽呀家人们下午好~今天Zoey来跟大家带来Facebook做落地页的标准和建议&#xff01;需要的家人建议点赞收藏啦&#xff01;&#xff01;用户通过点击你的推广链接、搜索引擎搜索结果页面的快照链接、社交媒体中的网页链接、电子邮件中的链接等进入你网站的特定页面&#xff0c…

tcp链接中的三次挥手是什么原因

一、tcp链接中的正常四次挥手过程&#xff1f; 刚开始双方都处于 ESTABLISHED 状态&#xff0c;假如是客户端先发起关闭请求。四次挥手的过程如下&#xff1a; 1、客户端打算关闭连接&#xff0c;此时会发送一个 TCP 首部 FIN 标志位被置为 1 的报文&#xff0c;也即 FIN 报文…

pytorch项目实战-分类模型李宏毅 21 机器学习第三次作业代码详解 CNN图片分类任务

CNN 卷积神经网络食物分类任务 前言一、数据集介绍二、CNN模型整体框架三、卷积神经网络代码详解3.1 导入需要使用的包3.2 数据集&#xff0c;数据加载器&#xff0c;数据增强操作3.2.1 数据增强3.2.2 数据集构建3.2.3 加载器构建 3.3 卷积神经网络构建3.4 训练代码3.4.1 半监督…

jmeter多用户登录并退出教程

有时候为了模拟更真实的场景&#xff0c;在项目中需要多用户登录并退出操作&#xff0c;大致参考如下 多用户登录前面已经实现&#xff1a;参考博文 多用户登录并退出jmx文件&#xff1a;百度网盘 提取码&#xff1a;0000 一、多用户退出操作 添加一个setUp线程组&#xff0…

Perplexity 搜索引擎刚刚推出了新的页面功能——维基百科可以扔了

Perplexity 允许用户根据搜索结果创建自定义页面 人工智能搜索引擎初创公司 Perplexity 推出了一项新功能&#xff0c;使其结果更具粘性&#xff0c;允许用户将研究转变为易于共享的页面。页面建立在 Perplexity 中现有的人工智能驱动的搜索功能之上&#xff0c;该功能使用与 …

云服务(ECS)Docker安装vulhub安装详解

本文以xshell进行远程控制 1.以ssh连接云服务器 ssh 服务器名公网ip [D:\~]$ ssh root47.99.138.9 在弹框中输入密码 2.安装docker curl -s http://get.docker.com/ | sh rootiZbp1fm14idjlfp53akni8Z:~# curl -s https://get.docker.com/ | sh # Executing docker insta…

万字长文,小白新手怎么开始做YOLO实验,从零开始教!整体思路在这里,科研指南针!

最近专栏来了很多的新手小白&#xff0c;对科研实验的过程感到困惑和无从下手&#xff0c;这篇文章就来讲解一下整体的科研流程&#xff0c;从选择数据集到发表论文的各个步骤&#xff0c;并针对大家在实验中常犯的错误进行解答。并且为大家提供通向我其他相关博客的指引&#…

激光焊接机作为一种高效、精密的焊接设备

激光焊接机是一种用于材料加工时激光焊接的机器&#xff0c;以下是对其的详细介绍&#xff1a; 1. 定义与别称&#xff1a; 激光焊接机&#xff0c;又常称为激光焊机、镭射焊机&#xff0c;是材料加工激光焊接时用的机器。 2. 工作原理&#xff1a; 激光焊接是利用高能量…

【计算机毕业设计】345大学生心理健康测评管理系统小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

【数据结构与算法 | 二叉树篇】二叉树的前中后序遍历(递归版本)

1. 二叉树的概念 (1). 二叉树的结构 借用了一下力扣的模板 public class TreeNode {int val;TreeNode left;TreeNode right;TreeNode() {}TreeNode(int val) { this.val val; }TreeNode(int val, TreeNode left, TreeNode right) {this.val val;this.left left;this.righ…

Linux下的Git应用

1、卸载 2、安装 3、创建并初始化 4、配置 &#xff08;附加删除语句&#xff09; 5、查看&#xff08;tree .git/&#xff09; 6、增加和提交 7、打印日志 8、验证已操作工作

公告:公众号铁粉粉丝介绍以及说明

大家好&#xff0c;我是公众号博主--夏目 机械电气电机杂谈是我个人建立&#xff0c;为分享机械&#xff0c;电气&#xff0c;电机知识为主&#xff0c;闲谈杂聊社会时事&#xff0c;职场见闻&#xff0c;生活琐事&#xff0c;成长趣事&#xff0c;学习心得&#xff0c;读书观影…

C#WPF数字大屏项目实战06--报警信息

1、ItemsControl 简介 ItemsControl 是用来表示一些条目集合的控件&#xff0c;所以它叫条目控件&#xff0c;它的成员是一些其它控件的集合&#xff0c;其继承关系如下&#xff1a; 其常用的派生控件为&#xff1a;ListBox、ListView、ComboBox&#xff0c;为ItemsCo…

充电宝怎么选?充电宝目前什么牌子质量好耐用?盘点好用充电宝

充电宝怎么选&#xff1f;是不是很多朋友在选充电宝上非常的纠结&#xff1f;在买充电宝上面还是非常有讲究的&#xff01;市面上的充电宝虽然多&#xff0c;但是不排除很多存在安全隐患的&#xff0c;如果稍微没有挑选好充电宝的话&#xff0c;买来的充电宝极大可能是存在非常…

在 Kubesphere 中开启新一代云原生数仓 Databend

上周六&#xff0c;由 KubeSphere 社区联合 Databend 社区以及纵目科技共同组织的云原生 Meetup 北京站在北京圆满落幕。本次 Meetup 活动邀请到了 SkyWalking PMC 成员、青云科技架构及可观测性团队负责人、江苏纵目科技 APM 研发总监、青云科技容器产品经理、数元灵科技 CTO …

[线程与网络] 网络编程与通信原理(四):深入理解传输层UDP与TCP协议

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …

Java——类型转换

一、类型转换 1、介绍 类型转换分为自动类型转换和强制类型转换。 2、自动类型转换 自动类型转换是指在表达式中&#xff0c;当两种不同的数据类型组合在一起时&#xff0c;较小的数据类型会自动转换为较大的数据类型&#xff0c;这个过程是自动的&#xff0c;无需编程者手…