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

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

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?

Solution 1:^[1]

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

Solution 2:^[2]

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

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

Solution 3:^[3]

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/[email protected]/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/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-bs4.min.js"></script>

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

Solution 4:^[4]

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/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Akbar Mirsiddikov
Solution 2	Dylan
Solution 3	Furqan S. Mahmoud
Solution 4

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]