时间戳

首页 > 解决方案 > Summernote 不会加载工具栏面板

jquery - Summernote 不会加载工具栏面板

问题描述

嗨，我正在尝试使用summernote，但我仍然无法理解为什么它不能完全加载，即使在重新洗牌我的所有脚本文件并仔细检查一切是否正常之后，我只得到了可调整大小的文本框，但我无法得到它完全工作，这就是它现在的样子： 在此处输入图像描述

如您所见，我似乎无法显示面板。这些是脚本文件：

<!DOCTYPE html>
<html style="box-shadow:none">
<head>
<link rel="shortcut icon" href="images/favicon.ico">
<!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" 
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
@Scripts.Render("~/bundles/jquery")
@Styles.Render("~/Content/all.min.css")
@Styles.Render("~/Content/font-awesome.min.css")
@Styles.Render("~/Content/font-awesome.css")
@Scripts.Render("~/bundles/modernizr")
@Styles.Render("~/Content/bootstrap.min.css")
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
@Scripts.Render("~/Scripts/bootstrap.min.js")
@Html.IncludeVersionedCss("/Content/summernote.min.css")
@Html.IncludeVersionedJs("/Scripts/summernote.min.js")
@Styles.Render("~/Content/css")
@Html.IncludeVersionedCss("/Content/time.css")
@Html.IncludeVersionedCss("/Content/timeline.css")
@Html.IncludeVersionedCss("/Content//bootstrap2-toggle.min.css")
@Html.IncludeVersionedCss("/Content/jquery.timepicker.css")
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
</head>
<body style="padding-top:0px">
@RenderBody()
<footer></footer>

<script src="https://unpkg.com/interactjs@1.3.4/dist/interact.min.js"></script>
@Scripts.Render("~/bundles/customBundle")
<script src="~/Scripts/revolution.extension.slideanims.min.js"></script>
<script src="~/Scripts/revolution.extension.layeranimation.min.js"></script>
<script src="~/Scripts/revolution.extension.navigation.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
@Html.IncludeVersionedJs("/Scripts/bootstrap2-toggle.min.js")     
@Html.IncludeVersionedJs("/Scripts/jquery.timepicker.min.js")
@RenderSection("scripts", required: false)
</body>
</html>

我的脚本：

<script>
$(document).ready(function () {
    $('.htmleditor').summernote();
});
</script>

HTML：

<div class="htmleditor">@Model.Item.GetPropertyValue(Model.Property).ToString()</div>

我哪里错了，请帮忙！！！提前致谢

标签： jquery.netrazorbootstrap-4summernote

解决方案

我遇到了同样的问题。如果你打开 devTools，你可能会看到一些 Uncaughted Error 提到你的 Bootsrap 需要 popper.js。

有两种方法可以解决它：

  1. 在包含 bootstrap.js 之前包含 popper.js

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>

  2. 包括 bootstrap 包，而不仅仅是 bootstrap.js。该包包含 popper.js

    参考：其他帖子的解决方案

推荐阅读