editor组件封装



  • 引入微信官网给的demo,改写成组件形式,一直不成功,请问哪里出错了?```

    wxml
    
    <view class="container" style="height:{{editorHeight}}px;">
      <editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady">
      </editor>
    </view>
    
    <view class="toolbar" catchtouchend="format" hidden="{{keyboardHeight<=0}}" style="bottom: {{isIOS ? keyboardHeight : 0}}px">
      <i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
      <i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
      <i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
      <i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
      <i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
      <i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
      <i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
      <i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
      <i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
    </view>
    
    js
    
    Component({
    
        behaviors: [],
    
        // 属性定义(详情参见下文)
        properties: {
            myProperty: { // 属性名
                type: String,
                value: ''
            },
            myProperty2: String // 简化的定义方式
        },
    
        data: {
            formats: {},
            readOnly: false,
            placeholder: '开始输入...',
            editorHeight: 300,
            keyboardHeight: 0,
            isIOS: false
        },
        lifetimes: {
            created: function () {
                console.log('created');
            },
            attached: function () {
                // 在组件实例进入页面节点树时执行
                console.log('attached')
            },
            detached: function () {
                // 在组件实例被从页面节点树移除时执行
                console.log('detached')
            },
        },
    
        pageLifetimes: {
            // 组件所在页面的生命周期函数
            show: function () {
                console.log('show');
            },
            hide: function () {
            },
            resize: function () {
            },
        },
        ready() {
            this.onLoad();
        },
    
        methods: {
            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')
                    }
                })
            },
            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: '80%',
                            success: function () {
                                console.log('insert image success')
                            }
                        })
                    }
                })
            },
            clickHandler() {
                console.log('clickHandler');
                this.triggerEvent('myevent', {f: 1})
            }
        },
    
    });
    

    c7833059-0e85-46de-bdcf-3f0770898229-image.png




登录后回复