如何解决$(...).summernote is not a function报错问题

这个错误的核心原因是summernote插件没有正确挂载到你使用的jQuery实例上，按以下步骤逐一排查修复：

• 检查资源引入顺序和完整性
  必须严格按以下顺序引入资源：
  1. 先引入jQuery资源，必须早于summernote引入
  2. 再引入summernote的CSS文件
  3. 最后引入summernote的JS文件
     漏引summernote CSS、引入顺序颠倒，或者jQuery版本和summernote版本不兼容（最新版summernote需要jQuery 3.5及以上版本支持），都会导致插件加载失败。
• 确认没有重复引入jQuery
  如果页面在引入summernote之后，第二次引入了jQuery，会覆盖已经挂载了summernote的旧jQuery实例，直接导致插件失效。检查全局所有script标签，确保jQuery仅在summernote之前引入一次。
• 调整代码执行顺序和位置
  你提到的let msg = $("#summernote").summernote("code");报错，大概率是这行代码放在了summernote初始化之前执行，同时建议你把JS代码移到#summernote DOM元素的后面，避免DOM未渲染就执行初始化逻辑，参考修改后的代码：

  <div class="nk-block nk-block-lg">
    <div id="summernote"></div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
        // 第一步先初始化编辑器
        $('#summernote').summernote({
            placeholder: 'description',
            tabsize: 2,
            height:200,
            toolbar:
            [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['help']]
            ]
        });
        // 第二步再调用方法获取内容，必须放在初始化逻辑之后执行
        let msg = $("#summernote").summernote("code");
    });
  </script>
  

• 解决jQuery作用域冲突
  如果页面内有其他JS库占用了$符号，可以用jQuery关键字代替$调用，或者用闭包隔离作用域：

  (function($) {
    $(document).ready(function() {
      $('#summernote').summernote({/* 你的配置参数 */});
    });
  })(jQuery);
  

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