Html Kendo Editor 不显示顶部工具栏

【问题标题】：Html Kendo Editor not displaying the top toolbarHtml Kendo Editor 不显示顶部工具栏
【发布时间】：2016-04-01 14:15:51
【问题描述】：

我有一个剑道编辑器，定义如下：

 @(Html.Kendo().Editor()
          .Name("RestrictionsEditor")
          .Tag("div")
          .Tools(tools => tools
                .Clear()
                .Bold().Italic().Underline().Strikethrough()
                .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
                .CreateLink().Unlink()
                .InsertImage()
                .TableEditing()
                .FontColor().BackColor()
          )
          .Value(@<text> This is the Kendo Editor and it has 
                    some anchor tags pointing to external webistes.</text>)

当我在编辑器中单击时，字体格式的顶部工具栏没有显示。我想在用户在编辑器内单击时显示顶部工具栏，然后在用户在编辑器外单击时隐藏工具栏。请帮忙！

谢谢！

【问题讨论】：

标签： kendo-editor

【解决方案1】：

要显示隐藏工具栏，首先需要将工具栏默认设置为隐藏，然后实现选择和模糊事件来显示和隐藏工具栏。

Here 是一个在 JavaScript 中实现它的小提琴。

对于您的 MVC 实现，您需要在页面中添加脚本标签并在编辑器初始化后附加事件。像这样的。

<script>
$(document).ready(function () {

  //hide toolbar by default
  $("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").hide();

  //bind the select event
    $("#RestrictionsEditor").data("kendoEditor").bind("select", function(e){
    //show toolbar on selection
    $("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").show();
  });

  //bind the blur event
  $("#RestrictionsEditor").on("blur", function(e){
    //hide toolbar
        $("#RestrictionsEditor").closest(".k-editor").find(".k-editor-toolbar").hide();
    });

});
</script>

【讨论】：