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

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

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

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

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

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

但是，随着 0.8.0 的更新版本，$(...).code() 函数似乎不再可用。有谁知道我应该带来哪些改变才能让它发挥作用？

Answer 1

来自documentation：

销毁和编码

在 v0.7.0 之后，直接 jquery 方法、destroy 和 code 被移除 避免与其他 jquery 库发生冲突。你可以这样称呼 使用summernote api的方法。

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

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

Answer 2

您需要按照他们的 API Docs 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 版本（我正在访问位于资产中的一些引导文件），我删除了该行，一切都很好：

 <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

Answer 5

1。步骤

我创建此帖子是因为其他帖子中的建议在 Summernote v0.8.18 中不起作用。

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

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

1. 以下脚本用于在加载网页时加载 Summernote 编辑器：

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

1. 用于获取 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>