Html Kendo Editor die Anzeige nicht die obere Symbolleiste

Question

Ich habe ein Kendo-Editor wie folgt definiert:

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

Als ich im Editor klicken, wird die obere Symbolleiste für Schriftformatierung nicht angezeigt wird. Ich möchte die obere Symbolleiste anzeigen, wenn der Benutzer auf den Editor klickt und dann die Symbolleiste ausblenden, wenn der Benutzer außerhalb des Editors klickt. Bitte helfen Sie!

Danke!

Answer 1

Um anzuzeigen, dass die Symbolleiste ausgeblendet werden muss, muss die Symbolleiste zuerst standardmäßig ausgeblendet werden, und dann die Ereignisse zum Auswählen und Weichzeichnen implementieren, um die Symbolleiste ein- und auszublenden.

Here ist eine Geige, die dies in JavaScript implementiert.

Für Ihre MVC-Implementierung müssen Sie Skript-Tags zu Ihrer Seite hinzufügen und die Ereignisse nach der Initialisierung des Editors anhängen. So etwas wie das.

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