Uncaught TypeError: $(...).code is not a function (Summernote)

Question

I don't know if it's the same error as many got here:

jQuery is not a function erreor

how to fix : Uncaught TypeError: $(...).summernote is not a function #2087

jquery: Uncaught TypeError: $(…).error is not a function

But I'm stuck with it like a gum under my shoe.

Here's the actual error on my Chrome's Developer Tools.

I just wish to update Summernote from an older version which has this @ sign error.

Cant write @ using AltGr + @ combination or Ctrl + Alt +@Combination #1406

But then, with the newer version from 0.8.0, it seems that the $(...).code() function is no longer available. Any knows the change I should bring to make it work?

From documentation it looks like you need to use the summernote() function instead of .code(): https://summernote.org/getting-started/#basic-api — Master Yoda, Nov 07 '17 at 18:16

score 5 · Answer 1 · answered Dec 22 '18 at 08:58

5

simply works in my case when I added defer

<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js" defer></script>

My jquery version is 3.3.1

answered Dec 22 '18 at 08:58

Akbar Soft

1,028
10
19

score 2 · Accepted Answer · answered Nov 07 '17 at 18:19

From documentation:

destroy and code

After v0.7.0, direct jquery methods, destroy and code were removed for avoiding conflict with other jquery libraries. You can call this methods with summernote api.

The direct jQuery code() function has been deprecated and you now have to use the summernote() function:

$('#summernote').summernote();

score 1 · Answer 3 · answered Nov 28 '17 at 16:34

1

You'll need to call the function differently as stated by their API Docs https://summernote.org/getting-started/#basic-api

$('#summernote').summernote('code');

answered Nov 28 '17 at 16:34

Dylan

2,161
2
27
51

score 0 · Answer 4 · answered Jun 29 '20 at 18:23

For me, I wanted to use summer note with bootstrap4, I copied the below code from the official documentation but it didn't work, I realized afterwards that I was embedding a newer bootstrap version at the beginning of my page (I was reaching out to some bootstrap files located at the assets), I removed that line and everything went just fine:

 <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

https://stackoverflow.com/a/62644428/10121188

Sercan · Answer 5 · 2022-02-10T06:25:37.670

1. Steps

I created this post because the suggestions in other posts didn't work in Summernote v0.8.18.

As stated in the Summernote documentation, the following container is defined in the area where the editor will be rendered:

<div id="summernote">Test Application</div>
<button id="print">Print</button>

The following script is written to load the summernote editor when the web page is loaded:

$(document).ready(function () {
  $('#summernote').summernote({ height: 95, codemirror: { theme: 'monakai' }});
});

The method call used to get the Summetnote editor content has been changed:

$('#print').click(function() {
  /* Get the plain text typed into the editor */
  var plainTextContent = $($("#summernote").summernote("code")).text();
  console.log(plainTextContent);
  
  /* Get the formatted text written to the editor */
  var formattedTextContent = $("#summernote").summernote("code");
  console.log(formattedTextContent );
});

2. Demo

$(document).ready(function () {
  $('#summernote').summernote({ height: 95, codemirror: { theme: 'monakai' } });
});

$('#print').click(function() {
  /* Get the plain text typed into the editor */
  var plainTextContent = $($("#summernote").summernote("code")).text();
  console.log(plainTextContent);
  
  /* Get the formatted text written to the editor */
  var formattedTextContent = $("#summernote").summernote("code");
  console.log(formattedTextContent );
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<div id="summernote">
    Test Application
</div>

<button id="print">Print</button>

Uncaught TypeError: $(...).code is not a function (Summernote)

5 Answers5

1. Steps

2. Demo