Error: summernote is not a function when using local files
Error: summernote is not a function when using local files
我遇到了一个非常奇怪的问题。当我使用本地 summernote 文件加载文本编辑器时，“.summernote 不是函数”发生了。但是，如果我使用 cdn 文件加载编辑器，一切都很好。这是我的 HTML header 代码：
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8"/>
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>"/>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>"/>
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>"/>
<?php } ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<link href="favicon.ico" rel="icon">
<!-- include jquery -->
<script type="text/javascript" src="javascript/jquery/jquery-2.1.1.min.js"></script>
<!-- include libraries BS3 -->
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<link href="stylesheet/bootstrap.css" type="text/css" rel="stylesheet"/>
<!-- include font-awesome-->
<link href="javascript/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
<!-- include datetimepicker-->
<script src="javascript/jquery/datetimepicker/moment.js" type="text/javascript"></script>
<script src="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<link href="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen"/>
<!-- include customer stylesheet-->
<link type="text/css" href="stylesheet/stylesheet.css" rel="stylesheet" media="screen"/>
<!--include customer js-->
<script src="javascript/common.js" type="text/javascript"></script>
<?php if ($styles) { ;?>
<?php foreach ($styles as $style) { ;?>
<link href="<?php echo $style;?>" rel="stylesheet"></link>
<?php } ;?>
<?php } ;?>
<?php if ($scripts) { ;?>
<?php foreach ($scripts as $script) { ;?>
<script href="<?php echo $script;?>" type="text/javascript"></script>
<?php } ;?>
<?php } ;?>
<!-- <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">-->
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>-->
我尝试直接加载本地文件而不是通过 PHP 回显它们，但问题仍然存在。
我检查了每个href，没有死link。
然后我在 javascript 文件夹下创建了一个名为 test.html 的纯 HTML 文件，文本编辑器使用本地文件加载正常。
顺便说一句，我使用的框架是CI，文件结构是：
root
├──javascript
├──bootstrap
├──jquery
├──summernote
├──font-awesome
├──test.html
我认为您没有按正确的顺序包含脚本。
当您从 CDN 加载时，您的订单看起来像这样：
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="javascript/common.js" type="text/javascript"></script>
。 . .这是合乎逻辑的，因为你想确保 summernote 在你的主要 JS 代码执行时加载。
但是，您的 PHP 依赖管理代码在同一脚本之后注入了链接到本地文件的标签。基本上，在客户的脚本之前也转储所有这些逻辑：
<?php if ($styles) { ;?>
<?php foreach ($styles as $style) { ;?>
<link href="<?php echo $style;?>" rel="stylesheet"></link>
<?php } ;?>
<?php } ;?>
<?php if ($scripts) { ;?>
<?php foreach ($scripts as $script) { ;?>
<script src="<?php echo $script;?>" type="text/javascript"></script>
<?php } ;?>
<?php } ;?>
<script src="javascript/common.js" type="text/javascript"></script>
（另请注意，在您的 PHP 中，您为脚本标记生成编写了 href 而不是 src。）
对我来说，我想在 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>
我遇到了一个非常奇怪的问题。当我使用本地 summernote 文件加载文本编辑器时，“.summernote 不是函数”发生了。但是，如果我使用 cdn 文件加载编辑器，一切都很好。这是我的 HTML header 代码：
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8"/>
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>"/>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>"/>
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>"/>
<?php } ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<link href="favicon.ico" rel="icon">
<!-- include jquery -->
<script type="text/javascript" src="javascript/jquery/jquery-2.1.1.min.js"></script>
<!-- include libraries BS3 -->
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<link href="stylesheet/bootstrap.css" type="text/css" rel="stylesheet"/>
<!-- include font-awesome-->
<link href="javascript/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
<!-- include datetimepicker-->
<script src="javascript/jquery/datetimepicker/moment.js" type="text/javascript"></script>
<script src="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<link href="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen"/>
<!-- include customer stylesheet-->
<link type="text/css" href="stylesheet/stylesheet.css" rel="stylesheet" media="screen"/>
<!--include customer js-->
<script src="javascript/common.js" type="text/javascript"></script>
<?php if ($styles) { ;?>
<?php foreach ($styles as $style) { ;?>
<link href="<?php echo $style;?>" rel="stylesheet"></link>
<?php } ;?>
<?php } ;?>
<?php if ($scripts) { ;?>
<?php foreach ($scripts as $script) { ;?>
<script href="<?php echo $script;?>" type="text/javascript"></script>
<?php } ;?>
<?php } ;?>
<!-- <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">-->
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>-->
我尝试直接加载本地文件而不是通过 PHP 回显它们，但问题仍然存在。
我检查了每个href，没有死link。
然后我在 javascript 文件夹下创建了一个名为 test.html 的纯 HTML 文件，文本编辑器使用本地文件加载正常。
顺便说一句，我使用的框架是CI，文件结构是：
root
├──javascript
├──bootstrap
├──jquery
├──summernote
├──font-awesome
├──test.html
我认为您没有按正确的顺序包含脚本。
当您从 CDN 加载时，您的订单看起来像这样：
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="javascript/common.js" type="text/javascript"></script>
。 . .这是合乎逻辑的，因为你想确保 summernote 在你的主要 JS 代码执行时加载。
但是，您的 PHP 依赖管理代码在同一脚本之后注入了链接到本地文件的标签。基本上，在客户的脚本之前也转储所有这些逻辑：
<?php if ($styles) { ;?>
<?php foreach ($styles as $style) { ;?>
<link href="<?php echo $style;?>" rel="stylesheet"></link>
<?php } ;?>
<?php } ;?>
<?php if ($scripts) { ;?>
<?php foreach ($scripts as $script) { ;?>
<script src="<?php echo $script;?>" type="text/javascript"></script>
<?php } ;?>
<?php } ;?>
<script src="javascript/common.js" type="text/javascript"></script>
（另请注意，在您的 PHP 中，您为脚本标记生成编写了 href 而不是 src。）
对我来说，我想在 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>