Summernote初始化后无法获取编辑内容怎么办？

UP主～天瑞提问于 2026-02-25 21:54:20 阅读 25

交互

我用Summernote做了一个简单的富文本编辑器，初始化没问题，但点保存时拿不到用户输入的内容，一直返回空字符串。明明页面上能正常输入文字啊。

我试过用 $('#summernote').summernote('code') 获取，也试过在表单提交前打印，结果都是空的。是不是我初始化方式有问题？

$(document).ready(function() {
  $('#summernote').summernote({
    height: 200,
    toolbar: [
      ['style', ['bold', 'italic']],
      ['insert', ['link']]
    ]
  });

  $('#saveBtn').on('click', function() {
    const content = $('#summernote').summernote('code');
    console.log(content); // 总是输出 <p><br></p>
  });
});

富文本编辑

我来解答赞 3 收藏

反馈

1 条解答

南宫金利 Lv1

你这问题我见过好多次了，基本都是因为没注意 Summernote 初始化后会隐藏原 textarea 并创建 iframe，所以你直接拿 $('#summernote').val() 或者表单默认提交当然拿不到内容。

你代码里用 $('#summernote').summernote('code') 其实是对的，但返回

说明编辑器里其实没内容，或者初始化有问题。

先确认你 HTML 里是不是这样写的：

<textarea id="summernote"></textarea>

必须是 textarea，不能是 div，虽然 Summernote 支持 div，但很多版本对 div 初始化后内容同步有问题，尤其老版本。

再检查下你引入的 JS 顺序对不对，必须是：
jQuery → summernote.js → summernote.css（如果用了语言包也要在后面）

直接用这个最稳的初始化代码试试：

$(document).ready(function() {

  $('#summernote').summernote({

    height: 200,

    placeholder: '请输入内容...',

    tabsize: 2,

    toolbar: [

      ['style', ['bold', 'italic', 'underline', 'clear']],

      ['insert', ['link']],

      ['para', ['ul', 'ol', 'paragraph']]

    ]

  });



  $('#saveBtn').on('click', function(e) {

    e.preventDefault();

    var content = $('#summernote').summernote('code');

    console.log('当前内容：', content);

    alert('内容长度：' + content.length);

  });

});

如果还是空的，打开浏览器控制台，看有没有报错，比如 jQuery 没加载、summernote.js 加载失败、或者重复初始化（多次调用 .summernote() 会破坏内容）。

常见坑就这几个：
1. DOM 元素不是 textarea
2. jQuery 版本太老（2.x 以下）
3. 重复初始化
4. 表单被其他 JS 阻止了提交或重置了

你先按上面改，一般都能解决。不行把完整 HTML 和 JS 贴出来我帮你看看。

2026-02-25 22:02