TinyMCE in ASP.NET MVC 5 Razor

Question

Ich versuche, TinyMCE mit ASP.NET MVC 5 zu verwenden, jedoch scheint es nicht zu funktionieren. Das Textfeld wird angezeigt, es handelt sich jedoch um ein normales Textfeld, das nicht mit TinyMCE-Funktionen angereichert ist.

Views \ Shared_Layout.cshtml

<link rel="stylesheet" type="text/css" href="~/Content/jquery.datetimepicker.css"/> 
<script src="~/Content/jquery.js"></script> 
<script src="~/Content/build/jquery.datetimepicker.full.min.js"></script> 
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 
<script type="text/javascript"> 
    tinyMCE.init({ 
     mode: "specific_textareas", 
     editor_selector: "editorHtml", 
    }); 
</script> 

Views \ MyView \ Create.cshtml

@Html.TextAreaFor(model => model.Corpo, new { htmlAttributes = new { @class = "form-control editorHtml" } }) 

Irgendwelche Tipps?

Answer 1

Ihre aktuelle Ansicht Code erzeugt eine Ausgabe wie diese

<textarea cols="20" htmlattributes="{ class = form-control editorHtml }" 
             id="Corpo" name="Corpo" rows="2"></textarea> 

sieht Dies funktioniert nicht richtig. Es wurden nicht die gewünschten css-Klassen hinzugefügt, stattdessen wurde ein neues Attribut namens htmlAttributes hinzugefügt! Warum ? weil du die Hilfsmethode falsch benutzt hast!

So beheben Sie den fehlerhaften Code in Ihrem Helper-Methodenaufruf. Der zweite Parameter nimmt ein einzelnes anonymen Objekt.

@Html.TextAreaFor(model => model.Corpo, new { @class = "form-control editorHtml" }) 

Dies sollte den richtigen HTML-Code für den Textbereich generieren (siehe Quelltext der Seite anzeigen).

Jetzt funktioniert Ihr vorhandener Code zum Initialisieren des Rich Text Editors. Alternativ können Sie auch den ID-Selektor verwenden.

<script> 

    tinymce.init({ 
     selector: "#Corpo" 
    }); 

</script>