0

我正在尝试在一个简单的 Razor 页面中使用剑道编辑器。我输入了 Telerik 站点的代码，用于初始化编辑器和基本配置，如 https://docs.telerik.com/aspnet-mvc/html-helpers/editors/editor/overview页面所示。无论我是否在可编辑区域内单击，工具栏都不会显示。例如，这是包含基本配置的页面：

@using Kendo.Mvc.UI
@model TYX.Entities.Banner

@{
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Create Alert Banner</title>
</head>
<body>
    @*@Html.AntiForgeryToken()*@

    @(Html.Kendo().Editor()
    .Name("editor")
    .HtmlAttributes(new { style = "width: 100%;height:440px" })
    .Value(@<text>
               <p>
                   Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.
               </p>
            </text>)
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the Editor is used to get its client-side instance.
            var editor = $("#editor").data("kendoEditor");
        });
    </script>

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>
</body>
</html>

输出页面包含编辑器文本编辑区域，但我没有做任何事情使工具栏显示。 在此处输入图像描述

我有另一个来自不同项目的 Razor 页面，该页面显示工具栏没有任何问题，并且在页面加载后立即显示。这是该实例的页面代码：

    <div class="card-body card-padding p-t-0">
        <div class="row">
            <div class="col-md-6">
                <form id="bannerForm">
                    @Html.HiddenFor(x => x.Id)
                    <div class="form-group row align-items-center">
                        <label class="col-xl-2 col-form-label">Banner Body</label>
                        <div class="col-xl">
                            <div id="banner-body" class="k-content editor">
                                @(Html.Kendo().EditorFor(m => m.Body)
                                    .Name("Body")
                                    .HtmlAttributes(new { style = "width: 100%; height:420px", aria_label = "Body" })
                                    .Tools(tools => tools
                                        .Clear()
                                        .Formatting()
                                        .Bold().Italic().Underline()
                                        .CleanFormatting()
                                        .JustifyLeft().JustifyCenter().JustifyRight()
                                        .InsertUnorderedList().InsertOrderedList()
                                        .Outdent().Indent()
                                        .CreateLink().Unlink()
                                        .ViewHtml()
                                        .TableEditing()
                                    )
                                )
                            </div>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-xl-2 col-form-label">Is Active</label>
                        <div class="col-xl">
                            @Html.CheckBoxFor(m => m.IsActive)
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                &nbsp;
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <hr />
            </div>
        </div>
        <div class="col d-flex justify-content-end">
            <button class="btn btn-primary px-3"
                    type="button"
                    onclick="saveBanner();">
                Save
            </button>
        </div>
    </div>

这是输出的屏幕截图： 在此处输入图像描述

知道为什么我的工具栏没有显示吗？另外，我将工作页面中的代码粘贴到我的页面中，它也没有显示工具栏。

4

0 回答 0