尝试从 Summernote 获取代码时看到未捕获的 TypeError: $(...).summernote 不是函数

发布于 2025-01-18 00:47:35 字数 1535 浏览 4 评论 0原文

我试图从一个Summernote（已加载良好）中获取代码，但我面临着标题中提到的错误。您在这里有一个代码段：在体内，我宣布了这样的夏季之一： ＆lt; div class =“ SummerNote1” name =“ Into_summer_note” ID =“ Into_summer_note”＆gt;＆lt;/gt;/div;/div＆gt;

，然后在脚本标签下，我尝试以下内容：

                   $('.summernote1').summernote({
                    placeholder: 'Write your intro',
                    tabsize: 2,
                    height: 250,
                    toolbar: [
                      ['style', ['style']],
                      ['font', ['bold', 'underline', 'clear']],
                      ['color', ['color']],
                      ['para', ['ul', 'ol', 'paragraph']],
                      ['table', ['table']],
                      ['insert', ['link', 'picture', 'video']],
                      ['view', ['fullscreen', 'codeview', 'help']]
                    ]
                  }); 

                  function submitSummerNote()
                  {
                    console.log('Entered here')
                    var markupStr = $('.summernote1').summernote('code');
                    console.log(markupStr);
                  }

我尝试了以下示例Summernote页面和我陷入了完全相同的问题。我还尝试更新jQuery版本。现在，我正在尝试使用以下版本的JQuery和Bootstrap： ＆lt; script src =“ https://code.jquery.com/jquery-3.6.0.min.js”＆gt;＆lt;/script＆gt; ＆lt; link href =“ https://cdn.jsdelivr.net/npm/<受保护] /dist/summernote-lite.min.css“ rel =“ stylesheet”＆gt; ＆lt; script src =“ https://cdn.jsdelivr.net/npm/<受保护] /dist/summernote-lite.min.js"＆gt;＆lt ;/script>

原文

I am trying to obtain the code from one summernote(which has loaded fine) but I am facing the error mentioned in the title. You have a code snippet here:
In the body I have declare one of my summernotes like this:
<div class="summernote1" name="intro_summer_note" id="intro_summer_note"></div>

Then under the script tags I am trying the following:

                   $('.summernote1').summernote({
                    placeholder: 'Write your intro',
                    tabsize: 2,
                    height: 250,
                    toolbar: [
                      ['style', ['style']],
                      ['font', ['bold', 'underline', 'clear']],
                      ['color', ['color']],
                      ['para', ['ul', 'ol', 'paragraph']],
                      ['table', ['table']],
                      ['insert', ['link', 'picture', 'video']],
                      ['view', ['fullscreen', 'codeview', 'help']]
                    ]
                  }); 

                  function submitSummerNote()
                  {
                    console.log('Entered here')
                    var markupStr = $('.summernote1').summernote('code');
                    console.log(markupStr);
                  }

I have tried the examples from the summernote page and I am getting into the exactly same issue. I have also tried updating the jQuery version. Right now I am trying the following versions for jQuery and Bootstrap:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

陌伤ぢ 2025-01-25 00:47:35

我认为你搞乱了定位，我已经启动了代码并且它运行没有任何问题，请务必将 Bootstrap 和 jQuery 放在脚本之前，例如：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">  
<div class="summernote1" name="intro_summer_note" id="intro_summer_note"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js">
 </script>
<script>
    $('.summernote1').summernote({
    placeholder: 'Write your intro',
    tabsize: 2,
    height: 250,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']]
    ]
  }); 

  function submitSummerNote()
  {
    console.log('Entered here')
    var markupStr = $('.summernote1').summernote('code');
    console.log(markupStr);
  }
</script>

I think that you are messing with positioning, i've launched the code and it ran without any problem, be sure to put both Bootstrap and jQuery before your script, like:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">  
<div class="summernote1" name="intro_summer_note" id="intro_summer_note"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>    
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js">
 </script>
<script>
    $('.summernote1').summernote({
    placeholder: 'Write your intro',
    tabsize: 2,
    height: 250,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'clear']],
      ['color', ['color']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['fullscreen', 'codeview', 'help']]
    ]
  }); 

  function submitSummerNote()
  {
    console.log('Entered here')
    var markupStr = $('.summernote1').summernote('code');
    console.log(markupStr);
  }
</script>

回复收藏 0 原文

~没有更多了~