1

以下のように定義された Kendo Editor があります。

 @(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>)

エディター内をクリックすると、フォント書式設定用の上部ツールバーが表示されません。ユーザーがエディター内をクリックすると上部のツールバーを表示し、ユーザーがエディター外をクリックするとツールバーを非表示にします。助けてください！

ありがとう！

4

1 に答える 1

0

ツールバーを非表示にするには、最初にデフォルトでツールバーを非表示に設定する必要があります。次に、選択イベントとぼかしイベントを実装して、ツールバーを表示および非表示にします。

これを 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>
于 2016-04-21T04:33:57.727 に答える