(精华)2020年7月30日 微信小程序 富文本编辑器的使用
发布日期:2021-06-29 15:08:33
浏览次数:3
分类:技术文章
本文共 3132 字,大约阅读时间需要 10 分钟。
Page({ data: { formats: { }, readOnly: false, placeholder: '在这里尽情创作吧!', editorHeight: 300, keyboardHeight: 0, isIOS: false }, readOnlyChange() { this.setData({ readOnly: !this.data.readOnly }) }, onLoad() { const platform = wx.getSystemInfoSync().platform const isIOS = platform === 'ios' this.setData({ isIOS}) const that = this this.updatePosition(0) let keyboardHeight = 0 wx.onKeyboardHeightChange(res => { if (res.height === keyboardHeight) return const duration = res.height > 0 ? res.duration * 1000 : 0 keyboardHeight = res.height setTimeout(() => { wx.pageScrollTo({ scrollTop: 0, success() { that.updatePosition(keyboardHeight) that.editorCtx.scrollIntoView() } }) }, duration) }) }, updatePosition(keyboardHeight) { const toolbarHeight = 50 const { windowHeight, platform } = wx.getSystemInfoSync() let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight this.setData({ editorHeight, keyboardHeight }) }, calNavigationBarAndStatusBar() { const systemInfo = wx.getSystemInfoSync() const { statusBarHeight, platform } = systemInfo const isIOS = platform === 'ios' const navigationBarHeight = isIOS ? 44 : 48 return statusBarHeight + navigationBarHeight }, onEditorReady() { const that = this wx.createSelectorQuery().select('#editor').context(function (res) { that.editorCtx = res.context }).exec() }, blur() { this.editorCtx.blur() }, format(e) { let { name, value } = e.target.dataset if (!name) return // console.log('format', name, value) this.editorCtx.format(name, value) }, onStatusChange(e) { const formats = e.detail this.setData({ formats }) }, insertDivider() { this.editorCtx.insertDivider({ success: function () { console.log('insert divider success') } }) }, clickLogText(e) { that.editorCtx.getContents({ success: function (res) { console.log(res.html) wx.setStorageSync("content", res.html); // 缓存本地 console.log(res.html) } }) }, clear() { this.editorCtx.clear({ success: function (res) { // console.log("clear success") } }) }, removeFormat() { this.editorCtx.removeFormat() }, insertDate() { const date = new Date() const formatDate = `${ date.getFullYear()}/${ date.getMonth() + 1}/${ date.getDate()}` this.editorCtx.insertText({ text: formatDate }) }, insertImage() { const that = this wx.chooseImage({ count: 1, success: function (res) { that.editorCtx.insertImage({ src: res.tempFilePaths[0], data: { id: 'abcd', role: 'god' }, width: '100%', success: function () { console.log('insert image success') } }) } }) }})
转载地址:https://codeboy.blog.csdn.net/article/details/107686266 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年04月20日 12时01分19秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
maven 安装第三方jar包到本地仓库
2019-04-29
hbase数据结构模型
2019-04-29
Shell编程:return 返回脚本调用的状态码
2019-04-29
Hbase Shell 调用java代码:通过比较器,强过滤查询
2019-04-29
Linux防删除,恢复删除
2019-04-29
linux: shell脚本日常功夫
2019-04-29
linux脚本: 批量管理主机
2019-04-29
scala集合类型,函数
2019-04-29
spark: rdd的应用(scala api)
2019-04-29
spark: rdd的应用(java api)
2019-04-29
yarn: 资源调度机制
2019-04-29
spark的shell脚本分析
2019-04-29
推荐算法: 基于用户的协同过滤算法
2019-04-29
推荐算法:基于物品的协同过滤算法
2019-04-29
docker系列3:docker搭建CDH集群[单机单节点]
2019-04-29
ubuntu 16:使用系统自带的中文输入法
2019-04-29
k8s单机版[ microk8s ]
2019-04-29
docker系列6 :k8s集群[ 解压安装 ]
2019-04-29
maven- idea: 打包可执行jar
2019-04-29
docker系列2: windows安装docker
2019-04-29