admin管理员组文章数量:1356924
I am having trouble with the Summernote toolbar. I think it is related to the versions of the Jquery, Bootstrap, etc. Here is what I am using. I installed in my project summernote 1.0.3 using NuGet.
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
<!-- jQuery -->
<script src=".6.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<!-- include summernote css/js -->
<link href="/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="/[email protected]/dist/summernote.min.js"></script>
Some of the toolbar functions don't work. The table, for example. When I click the icon, nothing happens. Also, I cannot choose a font size, and other things.
Here is the code I use to load the control:
<script>
$(document).ready(function() {
//---------------------------------------------------------
// Initialize the summernote control with tool bar settings
// see
//---------------------------------------------------------
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontname', ['fontname']]
['fontsize', ['fontsize']],
['color', ['color']],
['table',['table']]
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'table']],
['height', ['height']]
],
height:195,
});
//----------------------------------------
// Disable the control if disable is true.
//----------------------------------------
var df = document.getElementById("disable");
if(df.value == 'True')
{
// $('#summernote').summernote('disable');
}
});
I have tried experimenting with different version but can't seem to find a combination that works in my app.
I am having trouble with the Summernote toolbar. I think it is related to the versions of the Jquery, Bootstrap, etc. Here is what I am using. I installed in my project summernote 1.0.3 using NuGet.
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/summernote.min.js"></script>
Some of the toolbar functions don't work. The table, for example. When I click the icon, nothing happens. Also, I cannot choose a font size, and other things.
Here is the code I use to load the control:
<script>
$(document).ready(function() {
//---------------------------------------------------------
// Initialize the summernote control with tool bar settings
// see https://summernote./deep-dive/#basic-api
//---------------------------------------------------------
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontname', ['fontname']]
['fontsize', ['fontsize']],
['color', ['color']],
['table',['table']]
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'table']],
['height', ['height']]
],
height:195,
});
//----------------------------------------
// Disable the control if disable is true.
//----------------------------------------
var df = document.getElementById("disable");
if(df.value == 'True')
{
// $('#summernote').summernote('disable');
}
});
I have tried experimenting with different version but can't seem to find a combination that works in my app.
Share Improve this question asked Mar 28 at 9:30 GroupPlayGroupPlay 258 bronze badges 2- if this is your code 1 to 1 i will advise you to add comma's after each setting after table there isnt an comma this can cause errors and functions wil then stop working and if unlucky all js wil stop – oelimoe Commented Mar 28 at 12:42
- I see that. I added them after the missing elements, but no change. – GroupPlay Commented Mar 28 at 12:52
1 Answer
Reset to default 1The problem was that the packages were not on the correct version or the correct file here are the correct file options.
Bootstrap 5
<link rel="stylesheet" href="~/lib/bootstrap/css/bootstrap.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/summernote-bs5.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/summernote-bs5.min.js"></script>
<textarea id="summernote"></textarea>
<script>
$(document).ready(function() {
//---------------------------------------------------------
// Initialize the summernote control with tool bar settings
// see https://summernote./deep-dive/#basic-api
//---------------------------------------------------------
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
// ['font', ['strikethrough', 'superscript', 'subscript']],
['fontname', ['fontname']],
// ['fontsize', ['fontsize']],
['color', ['color']],
['table', ['table']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'table']],
// ['height', ['height']],
],
height:195,
});
//----------------------------------------
// Disable the control if disable is true.
// //----------------------------------------
// var df = document.getElementById("disable");
// if(df.value == 'True')
// {
// $('#summernote').summernote('disable');
// }
});
</script>
Bootstrap 4
<!-- jQuery -->
<script src="https://ajax.googleapis/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/summernote-bs4.min.js"></script>
<textarea id="summernote"></textarea>
<script>
$(document).ready(function() {
//---------------------------------------------------------
// Initialize the summernote control with tool bar settings
// see https://summernote./deep-dive/#basic-api
//---------------------------------------------------------
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
// ['font', ['strikethrough', 'superscript', 'subscript']],
['fontname', ['fontname']],
// ['fontsize', ['fontsize']],
['color', ['color']],
['table', ['table']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'table']],
// ['height', ['height']],
],
height:195,
});
//----------------------------------------
// Disable the control if disable is true.
// //----------------------------------------
// var df = document.getElementById("disable");
// if(df.value == 'True')
// {
// $('#summernote').summernote('disable');
// }
});
</script>
Normal summernote (bootstrap 3)
<!-- Bootstrap -->
<link href="https://stackpath.bootstrapcdn/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/summernote.min.js"></script>
<textarea id="summernote"></textarea>
<script>
$(document).ready(function() {
//---------------------------------------------------------
// Initialize the summernote control with tool bar settings
// see https://summernote./deep-dive/#basic-api
//---------------------------------------------------------
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
// ['font', ['strikethrough', 'superscript', 'subscript']],
['fontname', ['fontname']],
// ['fontsize', ['fontsize']],
['color', ['color']],
['table', ['table']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'table']],
// ['height', ['height']],
],
height:195,
});
//----------------------------------------
// Disable the control if disable is true.
// //----------------------------------------
// var df = document.getElementById("disable");
// if(df.value == 'True')
// {
// $('#summernote').summernote('disable');
// }
});
</script>
Summernote lite (No Bootstrap)
<!-- Bootstrap -->
<script src="https://code.jquery/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/summernote-lite.min.js"></script>
<textarea id="summernote"></textarea>
<script>
$(document).ready(function() {
//---------------------------------------------------------
// Initialize the summernote control with tool bar settings
// see https://summernote./deep-dive/#basic-api
//---------------------------------------------------------
$('#summernote').summernote({
fontSizes: ['8', '9', '10', '11', '12', '14', '18', '24', '48', '64'],
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
// ['font', ['strikethrough', 'superscript', 'subscript']],
['fontname', ['fontname']],
// ['fontsize', ['fontsize']],
['color', ['color']],
['table', ['table']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'table']],
// ['height', ['height']],
],
height:195,
});
//----------------------------------------
// Disable the control if disable is true.
// //----------------------------------------
// var df = document.getElementById("disable");
// if(df.value == 'True')
// {
// $('#summernote').summernote('disable');
// }
});
</script>
本文标签： Toolbar functions do not work on summernoteStack Overflow
版权声明：本文标题：Toolbar functions do not work on summernote - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744046213a2581569.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论