Question: TinyMCE in ASP.NET MVC 5 Razor

Question

TinyMCE in ASP.NET MVC 5 Razor

Answers 1
Added at 2016-12-30 18:12
Tags
Question

I'm trying to use TinyMCE with ASP.NET MVC 5, however, it does not seem to work. The textarea appears, but it's a regular textarea, not enriched with TinyMCE functionality.

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" } })

Any tips?

Answers
nr: #1 dodano: 2016-12-30 18:12

Your current view code is producing output like this

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

This does not looks correct. It did not add the css classes you wanted, instead it added a new attribute called htmlAttributes! Why ? because you used the helper method in an incorrect way!

So fix the bad code in your helper method call. The second parameter takes a single anonymous object.

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

This should generate the correct html code for the text area (check view source of the page).

Now your existing code to initialize the rich text editor will work. Alternatively you may use the Id selector as well.

<script>

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

</script>
Source Show
◀ Wstecz