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

Question

我不知道这是否与这里的许多错误相同：

jQuery is not a function erreor

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

但我像鞋底下的口香糖一样被它困住了。

这是我的 Chrome 开发者工具的实际错误。

我只想从有这个@符号错误的旧版本更新 Summernote。

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

但是，随着 0.8.0 的更新版本，$(...).code() 函数似乎不再可用。任何人都知道我应该做出什么改变才能让它发挥作用吗？

Answer 1

来自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.

direct jQuery code() 函数已被弃用，您现在必须使用 summernote() 函数：

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

Answer 2

您需要按照他们的 API 文档 https://summernote.org/getting-started/#basic-api

所述以不同方式调用该函数

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

Answer 3

当我添加 defer

时，我的情况很简单

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

我的jquery版本是3.3.1

Answer 4

对我来说，我想在 bootstrap4 中使用 summer note，我从官方文档中复制了下面的代码但是没有用，后来我意识到我正在嵌入一个更新的 bootstrap 版本在我的页面开头（我正在接触位于资产的一些 bootstrap 文件），我删除了那一行，一切都很好：

 <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>

Answer 5

1。步骤

我创建这个 post 是因为其他 post 中的建议在 Summernote v0.8.18 中不起作用。

如 Summernote documentation 中所述，在将呈现编辑器的区域中定义了以下容器：

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

编写如下脚本，在网页加载时加载summernote编辑器：

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

用于获取 Summetnote 编辑器内容的方法调用已更改：

$('#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。演示

$(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)