使用 Jquery 在光标焦点中将下拉值中的文本添加到 Summernote 文本区域答案

【问题标题】：Adding Text from Dropdown value to Summernote Textarea in Cursor focus using Jquery使用 Jquery 在光标焦点中将下拉值中的文本添加到 Summernote 文本区域
【发布时间】：2018-09-26 01:10:24
【问题描述】：

我仍然卡住了，但一次移动了一步。我只是想问一下如何将下拉值附加到 Summernote 文本区域中。我尝试了相同的解决方案来追加文本区域（没有 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>

浏览器控制台图片：

我希望有人可以帮助我。

【问题讨论】：

标签： javascript c# jquery html summernote

【解决方案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));              
});

【讨论】：

【解决方案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);
});

【讨论】：