(精华)2020年7月30日 微信小程序 富文本编辑器的使用
发布日期:2021-06-29 15:08:33
浏览次数:2
分类:技术文章
本文共 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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
不错!
[***.144.177.141]2024年04月03日 02时13分34秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
5G小科普(漫画版,So easy!)
2019-04-29
无人再提华强北
2019-04-29
千万不要小瞧那些不好好写代码的程序员
2019-04-29
80后,天才程序员, Facebook 第一任 CTO,看看开挂的人生到底有多变态?
2019-04-29
「第四篇」电赛控制题可以准备一些什么?
2019-04-29
「第五篇」全国电子设计竞赛-电源题设计方案总结
2019-04-29
「第六篇」对于电赛,我们应该看重什么?
2019-04-29
树莓派翻车了
2019-04-29
垃圾分类背后的数据和真相
2019-04-29
PID算法搞不懂?看这篇文章就够了。
2019-04-29
这位电子工程师,你不能错过。
2019-04-29
十八般武艺教你如何解决问题
2019-04-29
「权威发布」2019年大学生电子设计竞赛,仪器设备和主要元器件清单
2019-04-29
「重磅猜题之第二篇」2019年大学生电子设计竞赛
2019-04-29
知乎:硬件和软件哪个吃香?
2019-04-29
中国深圳,600架无人机的盛典!
2019-04-29
干货分享 JVM 之第 3 篇 —— Java 内存结构相关
2019-04-29
干货分享 JVM 之第 5 篇 —— 类加载器
2019-04-29
基于 Hystrix 高并发服务限流第 2 篇 —— 服务隔离(线程池隔离、信号量隔离)
2019-04-29