错误：使用本地文件时，summernote 不是函数

Question

我遇到了一个非常奇怪的问题。当我使用本地 Summernote 文件加载文本编辑器时，“.summernote 不是函数”发生了。但是，如果我使用 cdn 文件加载编辑器，一切都很好。这是我的 HTML 标头代码：

<!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，没有死链接。

然后我在 javascript 文件夹下创建了一个名为 test.html 的纯 HTML 文件，并使用本地文件很好地加载了文本编辑器。

顺便说一下我用的框架是CI，文件结构是：

root
├──javascript
   ├──bootstrap
   ├──jquery
   ├──summernote
   ├──font-awesome
   ├──test.html

Answer 1

我认为您的脚本顺序不正确。

当您从 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>

。 . .这是合乎逻辑的，因为您想确保在您的主 JS 代码执行时加载 summernote。

但是，您的 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。）

Answer 2

对我来说，我想在 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>