Question

我有一个普通的Kendo窗口，该窗口在模式窗口中有一个Kendo编辑器。我在Kendo编辑器的工具栏中添加了一个下拉列表。自定义doprdownlist的功能是在编辑器中插入某些值，如下所示：https://demos.telerik.com/aspnet-mvc/editor/custom-tools。自定义工具栏会填充，您可以选择一个值，然后将值插入到编辑器中，但是即使从DOM中也消失了。这是我正在使用的代码

ASPX侧面带有弹出窗口：

<div class="SearchParam">
    <label class="control-label" for="txtAlertEmailBody" style="width:200px">Email Body</label>
    <textarea id="txtAlertEmailBody" rows="10" cols="30" style="width:100%;height:400px" aria-label="editor" data-bind="value: AlertEmailBody"></textarea>
    <script type="text/x-kendo-template" id="insertSymbol-template">
        <label for="templateTool" style='vertical-align:middle;'>Insert Placeholder:</label>
        <select id="templateTool" style='width:200px'>
        <option value='[DATE]'>[DATE]</option>
        <option value='[LIMIT]'>[LIMIT]</option>
        <option value='[AMOUNT]'>[AMOUNT]</option>
        <option value='[PERCENTAGE]'>[PERCENTAGE]</option>
        <option value='[ACCOUNT NUMBER]'>[ACCOUNT NUMBER]</option>
        <option value='[CUSTOMER NAME]'>[CUSTOMER NAME]</option>
      </select>
    </script>
</div>

这是kendo实现的javascript端：

if (!$("#txtAlertEmailBody").data("kendoEditor")) {
    $("#txtAlertEmailBody").kendoEditor({
        encoded: false,
        tools: kendo.ui.Editor.prototype.options.tools.concat([
            {
                name: "customTemplate",
                template: $("#insertSymbol-template").html()
            }
        ]),

        resizable: {
            content: true,
            toolbar: true,
            encoded: false
        }
    });

    $("#templateTool").kendoDropDownList({
        change: function (e) {
            var inputValue = e.sender._inputValue();
            $('#txtAlertEmailBody').data('kendoEditor').exec("insertHtml", { html: inputValue });
        }
    });
}

var window = $("#emailAlert_popup").kendoWindow({
    width: "600px",
    visible: false,
    modal: true,
    actions: [
        "Maximize",
        "Close"
    ],
});

Answer 1

我通过扩展kendoWindow的宽度来解决此问题。仍然不确定为什么在较小的窗口中会发生这种情况。

var window = $("#emailAlert_popup").kendoWindow({
    title: AlertType + " Email Edit Window",
    width: "890px",
    visible: false,
    modal: true,
    actions: [
        "Maximize",
        "Close"
    ],
});

Kendo编辑器自定义编辑器工具从DOM中消失

1 个答案: