如何正确获取Summernote文本编辑器中的输入值

开发中使用Summernote富文本编辑器，初始化绑定元素代码如下：

<div id="txtDescription" class="summernote datarequired" title="Description Required"></div>

尝试使用$('#txtDescription').val()获取编辑器输入值始终失败，问题截图如下：

jQuery的.val()方法仅适用于input、textarea、select等原生表单元素，作用是读取这类元素的value属性值。Summernote绑定在普通div元素上初始化后，会生成独立的编辑区域DOM结构，编辑内容不会同步到原div的value属性上，因此用.val()无法拿到编辑器输入内容。

直接调用Summernote官方提供的内容获取API即可，可根据实际需求选择对应方法：

• 获取带格式的富文本HTML内容（最常用场景，存储后可直接渲染富文本效果）

const htmlContent = $('#txtDescription').summernote('code');

• 获取无格式纯文本内容（自动过滤所有HTML标签，仅返回文字内容）

const plainText = $('#txtDescription').summernote('getText');

表单提交适配技巧 #

如果需要将编辑器内容随普通表单一起提交，可以新增一个隐藏的input字段，通过以下两种方式同步值即可：

// 方式1：初始化编辑器时加回调，内容变更实时同步
$('#txtDescription').summernote({
  // 其余初始化配置项
  callbacks: {
    onChange: function(content) {
      $('input[name="description"]').val(content);
    }
  }
});

// 方式2：表单提交触发时手动赋值同步
$('form').on('submit', function() {
  const content = $('#txtDescription').summernote('code');
  $('input[name="description"]').val(content);
})

补充：你贴出的原始HTML代码中div标签未正常闭合，记得补全</div>，避免编辑器初始化出现异常。

内容的提问来源于stack exchange，提问作者A. B.