ASP.NET MVC 5 Razor 中的 TinyMCE

Question

我正在尝试将 TinyMCE 与 ASP.NET MVC 5 一起使用，但是，它似乎不起作用。出现文本区域，但它是一个常规文本区域，没有丰富 TinyMCE 功能。

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

有什么建议吗？

Answer 1

您当前的视图代码正在生成这样的输出

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

这看起来不正确。它没有添加您想要的 css 类，而是添加了一个名为 htmlAttributes 的新属性！为什么？因为你用错了辅助方法！

因此请修复您的辅助方法调用中的错误代码。第二个参数采用单个匿名对象。

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

这应该为文本区域生成正确的 html 代码（检查页面的查看源代码）。

现在，您现有的用于初始化富文本编辑器的代码可以使用了。或者，您也可以使用 Id 选择器。

<script>

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

</script>

ASP.NET MVC 5 Razor 中的 TinyMCE

TinyMCE in ASP.NET MVC 5 Razor

asp.net

tinymce

razor

asp.net-mvc-5