多summernote实例场景下如何获取指定编辑器内容？

问题原因 #

直接通过jQuery.val()获取被Summernote初始化后的textarea值，可能因Summernote的内容同步机制或代码执行时机问题，导致无法正确拿到对应编辑器的最新内容，甚至误取到第一个实例的初始值。

解决方案 #

1. 使用Summernote官方API获取内容（推荐）

Summernote提供了专门的方法获取编辑器内容，直接针对目标ID调用即可：

// 获取form_invoice对应编辑器的HTML内容
let description = $("#{{ form_invoice.description.auto_id }}").summernote('code');
// 获取form_brand对应编辑器的HTML内容
let description2 = $("#{{ form_brand.description.auto_id }}").summernote('code');

如果需要纯文本内容，可以对返回的HTML做转换处理。

2. 强制同步编辑器内容到原textarea

如果坚持使用.val()，可以先调用sync方法强制同步编辑器内容到原textarea，再取值：

// 先同步form_invoice编辑器内容到textarea
$("#{{ form_invoice.description.auto_id }}").summernote('sync');
let description = $("#{{ form_invoice.description.auto_id }}").val();

// 同理处理form_brand
$("#{{ form_brand.description.auto_id }}").summernote('sync');
let description2 = $("#{{ form_brand.description.auto_id }}").val();

3. 验证Django模板生成的ID唯一性

打开浏览器开发者工具，检查渲染后的HTML，确认两个textarea的ID（即{{ form_invoice.description.auto_id }}和{{ form_brand.description.auto_id }}生成的内容）确实不重复。如果ID重复，需要调整Django表单的auto_id设置，确保每个textarea的ID唯一。

4. 确保代码执行时机正确

将获取内容的代码放在$(document).ready()回调中，或者确保在Summernote初始化完成后再执行，避免因编辑器未初始化导致的取值错误：

$(document).ready(function() {
    // 先初始化所有Summernote实例
    $("textarea").each(function () {
        $(this).summernote({
            height: 240,
            toolbar: [
                ['font', ['bold', 'underline', 'clear']],
                ['para', ['ul', 'ol']],
                ['insert', ['link']],
                ['view', ['help']]
            ]
        });
    });

    // 绑定到提交按钮点击事件，在需要时获取内容
    $("#submit-btn").click(function() {
        let description = $("#{{ form_invoice.description.auto_id }}").summernote('code');
        let description2 = $("#{{ form_brand.description.auto_id }}").summernote('code');
        // 用Axios提交数据
        axios.post('/your-submit-url/', {
            invoice_description: description,
            brand_description: description2
        });
    });
});

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