Adding Text from Dropdown value to Summernote Textarea in Cursor focus using Jquery

Question

I'm still stuck but moved 1 step at a time. I just want to ask on how will I append a dropdown value into a Summernote Textarea. I tried the same solution for appending in a textarea (without summernote integration) which works but seems not working on Summernote. Their website seems to be down as of the moment.

Here is my Set of Codes and Images from Browser console

My Button click event to pass dropdown value into textarea:

$("#btnAddVariable").click(function (e) {
    var eVariable = $("#EmailVariable option:selected").val();

    var $txt = $(".note-editable");
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = eVariable;
        $txt.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));              
})

My Dropdown and Button:

<div class="form-group">
    @Html.LabelFor(model => model.EmailVariable, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-6">
        @Html.DropDownListFor(model => model.EmailVariable, new SelectList(ViewBag.emailVariables, "Value", "Text"), "Please Select", htmlAttributes: new { @class = "form-control" })
       @* @Html.DropDownList(model => model.EmailVariable, new SelectList(ViewBag.emailSender, "Value", "Text"), "Please Select", htmlAttributes: new { @class = "form-control" })*@

    </div>
    <div class="col-md-2">
        <input type="button" id="btnAddVariable" value="Add Variable" class="btn btn-primary chosen" />
    </div>
</div>

Text Area with summernote:

<div class="form-group">
    @Html.LabelFor(model => model.EmailMessage, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-8">
        <div class="ibox-content no-padding">
            @Html.TextAreaFor(model => model.EmailMessage, new { @class = "summernote", rows = "5", cols = "90" })
        </div>
    </div>
</div>

Browser Console image:

I hope someone can help me with this.

Answer 1

Critically inspecting your code, I believe you are using summernote in a wrong way. Here is a fix for your code

$("#btnAddVariable").click(function (e) {
    var eVariable = $("#EmailVariable option:selected").val();

    var txt = $(".summernote").('code'); //get the summernote text
        var caretPos = $txt[0].selectionStart;
        var textAreaTxt = $txt.val();
        var txtToAdd = eVariable;
        $(".summernote").summernote('code', textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));              
});

Answer 2

This is the correct way:

$("#btnAddVariable").click(function (e) {
// if the text you want to add is the value of the #EmailVariable dropdown
   var eVariable = $("#EmailVariable option:selected").val();

// if the text you want to add is the value of the #EmailVariable dropdown
// var eVariable = $("#EmailVariable option:selected").text();

    $(".summernote").summernote('editor.insertText',eVariable);
});