javascript - 未捕获的 TypeError : Cannot call method 'removeClass' of undefined, 剑道小部件无法正常工作

Question

我正在尝试在我的页面上实现几个 KendoUI 网络小部件，但是这些小部件没有按预期工作并且存在以下问题:

1. Editor 初始化正常，但有一些问题，例如悬停时在它突出显示的选项上但是当你离开时它应该得到恢复正常，但事实并非如此
2. 如果我刷新页面几次有时 Editor 可以正常初始化，但有时却不行
3. 其他小部件 kendoDatePicker(); 和 kendoDropDownList(); 是甚至没有初始化
4. 我的 JQ 表单验证在此页面上也不起作用

此外，在 chrome 控制台中我有以下错误Uncaught TypeError: Cannot call method 'removeClass' of undefined on line # 23679 of kendo.web.js 声明如下:

if (value !== DropDownList.fn.value.call(that)) {
            that.text(that.options.title);
            that._current.removeClass("k-state-selected");//This is line # 23679
            that.current(null);
            that._oldIndex = that.selectedIndex = -1;
        }

我在页面上包含以下脚本:

<script src="/Scripts/jquery-1.7.1.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/modernizr-2.5.3.js"></script>
<script src="/Scripts/kndu/kendo.web.js"></script>
…
….

<script>
    $(document).ready(function () {
        $("#editor").kendoEditor({
            tools: [
                "bold",
                "italic",
                "underline",
                "strikethrough",
                "justifyLeft",
                "justifyCenter",
                "justifyRight",
                "justifyFull", "insertUnorderedList",
                "insertOrderedList",
                "formatBlock",
                "createLink",
                "unlink",
                "insertImage",
                "insertHtml",
                "viewHtml",
                {
                    name: "customTool",
                    tooltip: "Format as Code",
                    exec: function (e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<pre>" });
                    }
                }],

        });
        $("#date").kendoDatePicker();
        $("#categry").kendoDropDownList();


        $("#newpost").validate({
            rules: {
                ttle: {
                    maxlength: 150,
                    required: true,
                    onlyChars: true
                },
                smmry: {
                    maxlength: 250,
                    required: true
                },
                editor: {
                    maxlength: 35,
                    required: true
                },
                categry: {
                    required: true
                }
            }
        });
    });
    $.validator.addMethod('onlyChars', function (value) {
        return /^[a-zA-Z ]+$/.test(value);
    }, 'Please enter a valid name with only alphabets');
</script>

Answer 1

关于 insertHTML 文档在 here 中说:

the insertHtml tool requires a collection of text-value pairs. A separator may be included multiple times.

所以你应该有这样的东西:

$("#editor").kendoEditor({
    tools: [
        ...
        "insertHtml",
        ...
    ],
    insertHtml: [
        { text: "label 1", value: "<p>snippet 1</p>" },
        { text: "label 2", value: "<p>snippet 2</p>" }
    ]
});