Summernote 不会加载工具栏面板
Posted
技术标签:
【中文标题】Summernote 不会加载工具栏面板【英文标题】：Summernote won't load toolbar panel 【发布时间】：2020-07-01 18:09:45 【问题描述】：嗨，我正在尝试使用 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>
我哪里出错了，请帮忙！！！提前致谢
【问题讨论】：
【参考方案1】：我遇到了同样的问题。如果你打开 devTools，你可能会看到一些 Uncaughted Error 提到你的 Bootsrap 需要 popper.js。
有两种方法可以解决：
在包含 bootstrap.js 之前包含 popper.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
包括 bootstrap 包，而不仅仅是 bootstrap.js。该包包含 popper.js
参考：other post's solution
【讨论】：
以上是关于Summernote 不会加载工具栏面板的主要内容，如果未能解决你的问题，请参考以下文章