javascript - tinymce 与 mvc 没有选择器名称称为tinymce-textarea？

Question

我似乎无法获得我之前的输出 answer正在获取 TinyMCE。我正在使用 MVC，我的 HTML razor View 如下所示。

TextAreaFor 是我的 TinyMCE。在浏览器中查看 HTML 时，我没有看到 #tinymce-textarea 区域？所以我不确定如何将我的脚本绑定(bind)到它。

我想做的就是将tinymce文本区域输出到它下面的div。

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
      tinymce.init({
      selector: "#tinymce-textarea",
      setup: function (editor) {
        editor.on('change', function (e) {
            var newVal = tinymce.get('tinymce-textarea').getContent();
          $('.text-mirror').html(newVal);
        });
      }
    });
</script>

@using (Html.BeginForm("Create", "Post", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>

        <br />
        <div class="editor-label">
            @Html.TextAreaFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.ValidationMessageFor(model => model.Description)
        </div>
        <br />
        <div class="text-mirror">

        </div>

Answer 1

根据文档selector选项“使您能够指定 CSS 选择器表达式，该表达式将用于查找要转换的文本区域。”在您的 html 中，您没有任何 id tinymce-textarea 的文本区域。您只需将此 id 添加到您的 textartea html 属性

...
@Html.TextAreaFor(model => model.Description, new {Id = "tinymce-textarea"})

或者您可以使用由 MVC textarea helper 标准生成的 id，在您的情况下是 Description:

...
tinymce.init({
  selector: "#Description",
  setup: function (editor) {
    editor.on('change', function (e) {
        var newVal = tinymce.get('Description').getContent();
      $('.text-mirror').html(newVal);
    });
  }
});