小程序editor编辑器封装成组件和使用方法

[ 2022-12-04 10:21:44 | 作者: admin ]
字号: | |
官方editor(富文本编辑器,可以对图片、文字进行编辑):https://developers.weixin.qq.com/miniprogram/dev/component/editor.html


第三方封装的一个editor组件
下载地址:https://github.com/jxh1997/Editor
作者博客:https://blog.csdn.net/XH_jing/article/details/115509316

如果使用出错可以改写组件中的edirot ready函数
     onEditorReady() {
             let _this=this;
             console.log('编辑器组件初始化完成时触发');
             // 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中,应使用this.createSelectorQuery()来代替。
             // https://developers.weixin.qq.com/miniprogram/dev/api/wxml/wx.createSelectorQuery.html
             this.createSelectorQuery().select('#editor').context(res => {
                console.log('createSelectorQuery=>', res);
                this.editorCtx = res.context;
                let rtTxt = '';
                this.setContents(rtTxt); //设置富文本内容
                this.triggerEvent('onEditorReady',_this); //传递_this,page页面能使用 let _that=e.detail; _that.setContents("测试文本");

             }).exec();
         },



pages页面中调用组件的editor ready函数
   onEditorReady(e) {
         console.log('[onEditorReady]');
         richText = this.selectComponent('#richText'); //获取组件实例
         //richText.setContents("可以这样调用setContents方法");
         e.detail.setContents("也可以这样调用setContents方法");
     },




另外还看到一个博主介绍了editor的封装使用方法:
微信小程序中的editor组件放到自定义组件中去使用 https://blog.csdn.net/weixin_42475367/article/details/121381453
[最后修改由 admin, 于 2022-12-04 10:40:03]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2891

这篇日志没有评论。

此日志不可发表评论。