使用 Jquery 將下拉值中的文本添加到光標焦點中的 Summernote Textarea

Question

我仍然卡住，但一次移動 1 步。 我只是想問一下如何將下拉值附加到 Summernote Textarea 中。 我嘗試了相同的解決方案來附加到一個文本區域（沒有summernote集成），它有效但似乎不適用於Summernote。 他們的網站目前似乎已關閉。

這是我來自瀏覽器控制台的一組代碼和圖像

我的按鈕單擊事件將下拉值傳遞到 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));              
})

我的下拉菜單和按鈕：

<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>

帶有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>

瀏覽器控制台圖像：

我希望有人能幫我解決這個問題。

Answer 1

嚴格檢查您的代碼，我相信您以錯誤的方式使用了summernote。 這是您的代碼的修復

$("#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

這是正確的方法：

$("#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);
});