I am trying to use the Kendo Editor in a simple Razor page. I put in the code from the Telerik site for both initializing the Editor and for the Basic Configuration as seen on the https://docs.telerik.com/aspnet-mvc/html-helpers/editors/editor/overview page. In neither case does the Toolbar display no matter if I click inside the editable area or not. For example, this is the page containing the Basic Configuration:
@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>
The output page contains the Editor text edit area, but nothing I do makes the Toolbar show.
I have another Razor page from a different project that displays the toolbar without any problem and it is displayed as soon as the page loads. Here is the page code for that instance:
<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">
</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>
Here is a screenshot of the output:
Any idea why my toolbar is not showing? Also, I pasted the code from the working page into my page and it doesn't show the toolbar either.