Htmlの剣道エディタは、私は以下のように定義され、剣道エディタを持っている上部のツールバー

Question

を表示していない：私は、エディタ内をクリックする

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

、フォントフォーマットのトップツールバーは表示されません。ユーザーがエディター内をクリックしたときに一番上のツールバーを表示し、ユーザーがエディターの外をクリックしたときにツールバーを非表示にしたいとします。助けてください！

ありがとうございます！

Answer 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>