Kendo Editor格式下拉列表显示异常且点击后编辑器锁定问题求助

问题根源 #

• 你配置的tools数组中存在3个Kendo Editor官方未定义的无效工具项：VerticalAlignTop、Vertical-AlignTop、Verticaltop，无效配置会导致组件初始化时渲染逻辑异常，触发下拉弹出层的定位bug
• Kendo Editor自带的下拉弹出层默认会优先向下展开，当按钮在页面中部时，弹出层的定位计算错误导致层被隐藏但编辑器依然处于等待下拉操作的锁定状态，无法输入

修复方案 #

第一步：删除无效工具配置 #

去掉tools里三个不存在的垂直对齐工具项，如果需要垂直对齐功能，需要自定义工具实现，不能直接写不存在的工具名。

第二步：添加CSS强制修正弹出层定位优先级 #

避免弹出层被隐藏或者遮挡编辑器：

.k-editor .k-list-container {
    z-index: 10000 !important;
    /* 强制下拉框优先向上展开，避免下方空间足够时的定位bug */
    margin-top: -280px !important;
}

第三步：优化编辑器初始化配置，添加锁定状态自动解除逻辑 #

修改后的完整初始化代码如下：

$(function () {
    $("#quest").kendoEditor({
        imageBrowser: {
            transport: {
                read: "@Url.Action(\"Read\", \"ControlerName\")",
                destroy: {
                    url: "@Url.Action(\"Destroy\", \"ControlerName\")",
                    type: "POST"
                },
                create: {
                    url: "@Url.Action(\"Create\", \"ControlerName\")",
                    type: "POST"
                },
                thumbnailUrl: "@Url.Action(\"Thumbnail\", \"ControlerName\")",
                uploadUrl: "@Url.Action(\"Upload\", \"ControlerName\")",
                imageUrl: "@Url.Action(\"Image?path={0}\", \"ControlerName\")",
            }
        },
        tools: [
            "formatting",
            "bold",
            "italic",
            "underline",
            "superscript",
            "subscript",
            "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "insertUnorderedList",
            "insertOrderedList",
            "indent",
            "outdent",
            "insertImage",
            "createTable",
            "addRowAbove",
            "addRowBelow",
            "addColumnLeft",
            "addColumnRight",
            "deleteRow",
            "deleteColumn"            
        ],
        // 弹出层打开时的监听，确保编辑器不会异常锁定
        open: function(e) {
            if (e.sender && e.sender.editable) {
                e.sender.editable.enable(true);
            }
        }
    });
});

可选验证操作 #

如果修复后还是存在问题，可以升级你当前使用的Kendo UI版本到R1 2023及以上，该版本官方已经修复了多个Editor下拉弹出层的定位相关bug。

内容的提问来源于stack exchange，提问作者Rose