No value in TinyMCE when C# button is clicked

Question

I would like to get the content of TinyMCE in the backend but I'm ending with no values returned.

This is what I have:

HTML markup:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <script type="text/javascript" src="/tinymce/js/tinymce/tinymce.min.js"></script>
    <div style="margin-top: 50px;">
        <span>Set content for left side content</span>
<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    theme: "modern",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});
</script>
    <textarea id="leftContent" runat="server" name="content" style="width:100%"></textarea>

        </div>

     <div style="margin-top: 50px;">
        <span>Set content for right side content</span>
<script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        theme: "modern",
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ]
    });
</script>


    <textarea id="rightContent" runat="server" name="content" style="width:100%"></textarea>

        </div>

    <div style="margin-top: 20px;" class="row">
        <asp:Button runat="server" ID="btnSave" Text="Save" OnClick="btnSave_OnClick" CssClass="btn btn-success pull-right"/>
    </div>

</asp:Content>

Backend:

 protected void btnSave_OnClick(object sender, EventArgs e)
        {
            string test = leftContent.InnerHtml;
            string t2 = rightContent.InnerHtml;
        }

What am I doing wrong?

Answer 1

You may try to call the following on button click:

tinymce.triggerSave();

and then send the editor content eigther using the updated textarea content or the editor content directly using tinymce.get('leftContent').getContent();