Cannot read property 'getContent' of undefined in Tinymce

Question

I am working to send mail using rich text from Tinymce editor and displaying but I am getting following error while debugging in javascript Cannot read property 'getContent' of undefined

Here is my code //Model

 public class EmailModel
    {
        public int Id { get; set; }
        public string Sender { get; set; }
        public string Receiver { get; set; }
        public string SubjectText { get; set; }

        [AllowHtml]
        [UIHint("tinymce_full_compressed")]
        [Display(Name = "BodyText")]
        public string BodyText { get; set; }
        public string AboutMe { get; set; }
    }
    public class EmailListModel
    {

        public List<EmailModel> ListEmailModel { get; set; }
        public EmailModel EmailModel { get; set; }
    }

//View

@model StarRatingControl.Models.EmailListModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "EmployeeMail";
}

<h2>EmployeeMail</h2>

<div class="form-horizontal">
    <h4>About</h4>
    <hr />
    @Html.ValidationSummary(true)

    <div class="form-group">
        @Html.LabelFor(model => model.EmailModel.SubjectText, new { @class = "col-md-12" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.EmailModel.SubjectText, new { @style = "width:790px;" })
            @Html.ValidationMessageFor(model => model.EmailModel.SubjectText)
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.EmailModel.BodyText, new { @class = "col-md-12" })
        <div class="col-md-12">
            @Html.EditorFor(model => model.EmailModel.BodyText)
            @Html.ValidationMessageFor(model => model.EmailModel.BodyText)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" id="sendMail" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

//JS

$("#sendMail").click(function () {
        $('#' + 'BodyText').html(tinymce.get('BodyText').getContent());
        var subject = $("#SubjectText").val();
        var body = $("#BodyText").val();
        var data = {
            subject: subject,
            body: body
        };
        alert(body);
        $.post('@Url.Action("SendEmpMail", "ManageEmployee")', data, function (res) {
            if (res)
            {
                alert('Mail Sent Successfully');
            }
        });
    });

One important point is when I was using EmailModel in view everything was working fine but due to displaying I used EmailListModel. After using this model I am not getting values.

Answer 1

The tinymce.get() command requires you to pass the ID of the <textarea> that TinyMCE replaced. If you are seeing...

Cannot read property 'getContent' of undefined

...then your tinymce.get() command is not correct. So the question becomes what does this code:

@Html.EditorFor(model => model.EmailModel.BodyText)

create in the browser? What is the ID of the underlying <textarea> ? Once you know that you can use your get() command to target that editor instance.