editor组件封装

[jd_77a550708b22b]

引入微信官网给的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})
        }
    },

});

[test_pop_xndqs]

链接文本