如何在Meteor JS中为Summernote编辑器加载数据？

问题根因 #

你遇到的加载异常本质是初始化时机不匹配，触发两个核心问题：

1. Meteor模板渲染、数据加载、DOM挂载是异步流程，你写在模板内的内联脚本执行时，要么Summernote还未完成初始化，要么后端订阅的数据还没同步到本地，textarea里的绑定值还没被渲染填充，导致Summernote读取到空的初始内容。
2. Summernote初始化后会生成独立的富文本编辑DOM，和原生textarea脱离同步，后续模板数据更新到textarea时，不会自动同步到Summernote编辑器中。热重载时数据已经缓存到本地Minimongo，渲染速度匹配上了脚本执行时机，所以能正常显示。

修复步骤 #

第一步：清理模板内的无效脚本 #

把模板底部的这段内联script直接删掉，Meteor不推荐在模板内写业务脚本，应该用官方提供的模板生命周期钩子管理：

<script>
  $('.summernote').summernote('code');
</script>

第二步：在模板生命周期钩子中初始化编辑器 #

找到和consigneModif模板对应的JS文件，添加onRendered钩子，确保DOM完全挂载、数据加载完成后再初始化Summernote，同时加响应式监听保证数据变化时同步更新编辑器内容：

Template.consigneModif.onRendered(function() {
  // 保存模板实例上下文，方便后续在autorun中使用
  const instance = this;
  // 如果你开启了Meteor自动发布（autopublish）不需要手动订阅，可以删掉subscribe相关代码，直接执行后面的初始化逻辑
  instance.subscribe('yourSubscriptionName', { // 把yourSubscriptionName替换成你实际的订阅名称
    onReady: () => {
      // 初始化所有summernote编辑器
      $('.summernote').summernote({
        // 这里可以加你需要的Summernote配置项，比如高度、工具栏之类的
        height: 300
      });
      
      // 用autorun监听响应式数据变化，数据更新时主动同步到Summernote
      instance.autorun(() => {
        // 获取当前模板的上下文数据
        const currentData = Template.currentData();
        if (currentData) {
          // 逐个给编辑器同步最新内容
          $('#Name').summernote('code', currentData.Name || '');
          $('#Description').summernote('code', currentData.Description || '');
          $('#Condition').summernote('code', currentData.Condition || '');
          $('#Mode').summernote('code', currentData.Mode || '');
          // 日期输入框也可以顺便同步
          $('#Date').val(currentData.Date ? new Date(currentData.Date).toISOString().split('T')[0] : '');
          $('#DateFin').val(currentData.DateFin ? new Date(currentData.DateFin).toISOString().split('T')[0] : '');
        }
      });
    }
  });
});

第三步：补充表单提交时的内容同步（可选但推荐） #

提交表单时，先把Summernote的内容同步回原生textarea，避免拿不到最新编辑内容：

Template.consigneModif.events({
  'submit .formConsigne'(event, instance) {
    event.preventDefault();
    // 同步Summernote内容到原生textarea
    $('.summernote').each(function() {
      $(this).val($(this).summernote('code'));
    });
    // 你原来的表单提交逻辑写在下方即可
  }
});

第四步：销毁时清理编辑器（可选） #

为了避免页面切换后内存泄漏，可以加onDestroyed钩子销毁Summernote实例：

Template.consigneModif.onDestroyed(function() {
  $('.summernote').summernote('destroy');
});

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