使用 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);
});