StarSky
StarSky
  • 发布:2020-08-20 17:59
  • 更新:2020-08-26 10:16
  • 阅读:1651

【报Bug】editor富文本编辑器组件在ios端输入文字并插入图片后执行clear的时候,第二次输入的时候出现输入换行问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.8.6

手机系统: iOS

手机系统版本号: iOS 12.4

手机厂商: 苹果

手机机型: iphone6 plus

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @input="listenInput"></editor>
<button type="default" @touchstart.stop.prevent="insert">插入图片</button>
<button type="warn" @touchstart.stop.prevent="clear">清空</button>
</view>
</template>

<script>

export default {  

    data() {  
        return {  
            placeholder: '开始输入...'  
        }  
    },  
    methods: {  
        onEditorReady() {  
            uni.createSelectorQuery().select('#editor').context((res) => {  
                this.editorCtx = res.context  
            }).exec()  
        },  
        insert() {  
            this.editorCtx.insertImage({  
                src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597926465183&di=7e80a34113fc7660436bb754aeb840f5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',  
                width: '24px',  
                height: '24px',  
                extClass: 'emojiIcon'  
            })  
        },  
        clear() {  
            this.editorCtx.clear()  
        },  
        listenInput(e) {  
            console.log(e)  
        }  
    }  

}  

</script>

<style lang="scss">
.container {
padding: 10px;
}

    #editor {  
        width: 100%;  
        height: 300px;  
        background-color: #CCCCCC;  
    }  

    button {  
        margin-top: 10px;  
    }  

</style>

操作步骤:

<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @input="listenInput"></editor>
<button type="default" @touchstart.stop.prevent="insert">插入图片</button>
<button type="warn" @touchstart.stop.prevent="clear">清空</button>
</view>
</template>

<script>

export default {  

    data() {  
        return {  
            placeholder: '开始输入...'  
        }  
    },  
    methods: {  
        onEditorReady() {  
            uni.createSelectorQuery().select('#editor').context((res) => {  
                this.editorCtx = res.context  
            }).exec()  
        },  
        insert() {  
            this.editorCtx.insertImage({  
                src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597926465183&di=7e80a34113fc7660436bb754aeb840f5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',  
                width: '24px',  
                height: '24px',  
                extClass: 'emojiIcon'  
            })  
        },  
        clear() {  
            this.editorCtx.clear()  
        },  
        listenInput(e) {  
            console.log(e)  
        }  
    }  

}  

</script>

<style lang="scss">
.container {
padding: 10px;
}

    #editor {  
        width: 100%;  
        height: 300px;  
        background-color: #CCCCCC;  
    }  

    button {  
        margin-top: 10px;  
    }  

</style>

预期结果:

<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @input="listenInput"></editor>
<button type="default" @touchstart.stop.prevent="insert">插入图片</button>
<button type="warn" @touchstart.stop.prevent="clear">清空</button>
</view>
</template>

<script>

export default {  

    data() {  
        return {  
            placeholder: '开始输入...'  
        }  
    },  
    methods: {  
        onEditorReady() {  
            uni.createSelectorQuery().select('#editor').context((res) => {  
                this.editorCtx = res.context  
            }).exec()  
        },  
        insert() {  
            this.editorCtx.insertImage({  
                src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597926465183&di=7e80a34113fc7660436bb754aeb840f5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',  
                width: '24px',  
                height: '24px',  
                extClass: 'emojiIcon'  
            })  
        },  
        clear() {  
            this.editorCtx.clear()  
        },  
        listenInput(e) {  
            console.log(e)  
        }  
    }  

}  

</script>

<style lang="scss">
.container {
padding: 10px;
}

    #editor {  
        width: 100%;  
        height: 300px;  
        background-color: #CCCCCC;  
    }  

    button {  
        margin-top: 10px;  
    }  

</style>

实际结果:

<template>
<view class="container">
<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" @input="listenInput"></editor>
<button type="default" @touchstart.stop.prevent="insert">插入图片</button>
<button type="warn" @touchstart.stop.prevent="clear">清空</button>
</view>
</template>

<script>

export default {  

    data() {  
        return {  
            placeholder: '开始输入...'  
        }  
    },  
    methods: {  
        onEditorReady() {  
            uni.createSelectorQuery().select('#editor').context((res) => {  
                this.editorCtx = res.context  
            }).exec()  
        },  
        insert() {  
            this.editorCtx.insertImage({  
                src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597926465183&di=7e80a34113fc7660436bb754aeb840f5&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg',  
                width: '24px',  
                height: '24px',  
                extClass: 'emojiIcon'  
            })  
        },  
        clear() {  
            this.editorCtx.clear()  
        },  
        listenInput(e) {  
            console.log(e)  
        }  
    }  

}  

</script>

<style lang="scss">
.container {
padding: 10px;
}

    #editor {  
        width: 100%;  
        height: 300px;  
        background-color: #CCCCCC;  
    }  

    button {  
        margin-top: 10px;  
    }  

</style>

bug描述:

苹果ios端,editor组件在第一次输入完文字,点击插入一张图片,再点击清除按钮,第二次输入的时候,光标会自动换一行显示的bug,安卓端打印和显示都是正常的,不会出现换行。

2020-08-20 17:59 负责人:无 分享
已邀请:
StarSky

StarSky (作者) - 前端工程师

这个问题解决了, 直接在that.editorCtx.clear()后面加个that.editorCtx.insertText()方法ios端换行就好了。

该问题目前已经被锁定, 无法添加新回复