blueSky235
blueSky235
  • 发布:2023-06-28 23:18
  • 更新:2023-07-04 19:19
  • 阅读:235

【报Bug】editor组件在H5环境下,editorContext.format在加粗的情况下,再次调用无法取消加粗,其他不需要传value的也是一样的情况

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.8.4

浏览器平台: Chrome

浏览器版本: 114.0.5735.134

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="sky-editor">  
        <view class="sky-editor-tools">  
            <view class="icon_box" :class="{active: showBold}" @click="handleBold" v-if="tools.includes('bold')">  
                <text class="iconfont icon-zitijiacu"></text>  
            </view>  
            <view class="icon_box" :class="{active: showHeader}" @click="handleHeader" v-if="tools.includes('header')"><text  
                    class="iconfont icon-zitibiaoti"></text></view>  
            <view class="icon_box" :class="{active: showItalic}" @click="handleItalic" v-if="tools.includes('italic')"><text  
                    class="iconfont icon-italic"></text></view>  
            <view class="icon_box" @click="handleIns" v-if="tools.includes('ins')"><text  
                    class="iconfont icon-fengexian"></text></view>  
            <view class="icon_box" :class="{active: showUnderline}" @click="handleUnderline"  
                v-if="tools.includes('underline')"><text class="iconfont icon-zitixiahuaxian"></text>  
            </view>  
            <view class="icon_box" :class="{active: showAlignLeft}" v-if="tools.includes('align')"><text  
                    class="iconfont icon-zuoduiqi"></text></view>  
            <view class="icon_box" :class="{active: showAlignCenter}" v-if="tools.includes('align')"><text  
                    class="iconfont icon-juzhong"></text></view>  
            <view class="icon_box" :class="{active: showAlignRight}" v-if="tools.includes('align')"><text  
                    class="iconfont icon-youduiqi"></text></view>  
            <view class="icon_box" v-if="tools.includes('image')"><text class="iconfont icon-charutupian"></text></view>  
            <view class="icon_box" v-if="tools.includes('undo')"><text class="iconfont icon-chehuisekuai"></text></view>  
            <view class="icon_box" v-if="tools.includes('redo')"><text class="iconfont icon-huifu"></text></view>  
            <view class="icon_box"><text class="iconfont icon-queding_queren"></text></view>  
        </view>  
        <view class="sky-editor-content">  
            <editor id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar show-img-resize  
                @ready="onEditorReady" @input="getContent" @statuschange="onStatuschange"></editor>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        name: 'sky-editor',  
        props: {  
            tools: {  
                type: String, // bold 加粗  italic 斜体 ins 分割线 underline 下划线  header 标题 undo 撤销  redo 恢复  
                default: 'bold,italic,ins,underline,strike,header,undo,redo,image,align'  
            }  
        },  
        data() {  
            return {  
                editorCtx: null,  
                showBold: false,  
                showHeader: false,  
                showItalic: false,  
                showUnderline: false,  
                showAlignLeft: false,  
                showAlignCenter: false,  
                showAlignRight: false,  
                backups: {}  
            };  
        },  
        methods: {  
            onEditorReady() {  
                uni  
                    .createSelectorQuery()  
                    .in(this)  
                    .select('#editor')  
                    .fields({  
                            size: true,  
                            context: true  
                        },  
                        res => {  
                            this.editorCtx = res.context;  
                        }  
                    )  
                    .exec();  
            },  
            onStatuschange(e) {  
                const detail = e.detail;  
                this.checkStatus(detail, 'bold', 'showBold')  
                this.checkStatus(detail, 'header', 'showHeader')  
                this.checkStatus(detail, 'italic', 'showItalic')  
                this.checkStatus(detail, 'underline', 'showUnderline')  
                console.log(detail)  
            },  
            getContent(e) {  
                let obj = {  
                    html: e.detail.html, // 富文本内容  
                    text: e.detail.text, // 纯文字内容  
                }  
                this.backups = obj  
                this.$emit('change', obj)  
            },  
            handleBold() {  
                this.showBold = !this.showBold  
                this.editorCtx.format('bold')  
            },  
            handleHeader() {  
                this.showHeader = !this.showHeader  
                this.editorCtx.format('header', this.showHeader ? 'H2' : false)  
            },  
            handleItalic() {  
                this.showItalic = !this.showItalic  
                this.editorCtx.format('italic')  
            },  
            handleIns() {  
                this.editorCtx.insertDivider()  
            },  
            handleUnderline() {  
                this.showUnderline = !this.showUnderline  
                this.editorCtx.format('underline')  
            },  
            checkStatus(detail, name, obj) {  
                if (detail.hasOwnProperty(name)) {  
                    this[obj] = true;  
                } else {  
                    this[obj] = false;  
                }  
            },  
        }  
    };  
</script>  

<style lang="scss">  
    @import './iconfont.css';  

    .sky-editor {  
        display: flex;  
        flex-direction: column;  
        height: 100%;  
        background-color: #ffffff;  

        .sky-editor-tools {  
            display: flex;  
            align-items: center;  
            flex-wrap: wrap;  

            .icon_box {  
                display: flex;  
                align-items: center;  
                justify-content: center;  
                width: 100rpx;  
                height: 100rpx;  

                &.active {  
                    .iconfont {  
                        color: #409EFF;  
                    }  
                }  

                .iconfont {  
                    font-size: 50rpx;  
                    color: #333333;  
                }  
            }  
        }  

        .sky-editor-content {  
            flex: 1;  

            .ql-container {  
                height: 100%;  
                padding: 0 20rpx;  
                font-size: 32rpx;  
                color: #333333;  
            }  
        }  
    }  
</style>

操作步骤:

直接复制上面代码运行即可

预期结果:

加粗,斜体等功能正常使用

实际结果:

加粗,斜体可以实现,但是无法取消

bug描述:

editor组件在H5环境下,editorContext.format在加粗的情况下,再次调用无法取消加粗,其他不需要传value的也是一样的情况。

在小程序环境就可以正常使用

2023-06-28 23:18 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX3.8.7未复现此问题,用hello uni-app示例能复现你的问题吗?

  • blueSky235 (作者)

    今天更新到 3.8.7.20230703 版本就没有问题了

    2023-07-04 20:34

要回复问题请先登录注册