错误:使用本地文件时,summernote不是函数

时间:2016-12-12 08:21:35

标签: javascript php html5 summernote

我有一个非常奇怪的问题。当我使用我的本地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

2 个答案:

答案 0 :(得分: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。)

答案 1 :(得分:0)

对我来说,我想在bootstrap4中使用夏季笔记,我从官方文档中复制了以下代码,但是它没有用,后来我意识到我在页面的开头嵌入了一个新的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>