如何用jQuery将下拉框值追加到Summernote文本域？新手求助

嘿，我懂你现在的困扰——Summernote作为富文本编辑器，它有自己专属的API来操作内容，普通jQuery的.val()、.text()这些方法根本碰不到它内部的编辑区域，这就是你之前尝试失败的原因啦！

为什么原来的方法没用？ #

Summernote会把你的textarea转换成一个带iframe的富文本编辑容器，你直接操作原textarea的val或者text，根本同步不到编辑器的可视区域里，必须用它提供的官方方法来交互。

正确的实现方式 #

这里给你两种常用的方案，按需选择：

方案1：在光标位置插入选中值（推荐）

这个方法会把下拉框选中的内容直接插入到当前光标所在的位置，体验更友好：

$("#btnAddVariable").click(function (e) {
    e.preventDefault(); // 避免按钮触发默认的表单提交行为
    // 获取下拉框选中的值
    var eVariable = $("#EmailVariable option:selected").val();
    // 使用Summernote的insertText API插入文本
    $("#EmailMessage").summernote('insertText', eVariable);
});

方案2：追加到编辑器内容末尾

如果你想把值直接加到现有内容的最后，可以用code方法获取并更新全部内容：

$("#btnAddVariable").click(function (e) {
    e.preventDefault();
    var eVariable = $("#EmailVariable option:selected").val();
    // 获取编辑器当前的全部内容
    var currentContent = $("#EmailMessage").summernote('code');
    // 追加新值后重新设置内容
    $("#EmailMessage").summernote('code', currentContent + eVariable);
});

额外提醒 #

别忘了确保你的Summernote已经正确初始化了，页面加载时要加上类似这样的代码：

$(document).ready(function() {
    $("#EmailMessage").summernote({
        height: 300, // 可以根据需求调整编辑器高度
        // 其他你需要的配置项
    });
});

内容的提问来源于stack exchange，提问作者Enrique Gil