Setting max length in summernote
How do I apply max length to Summernote? Applying maxlength to text fields doesn't work here.
https://github.com/summernote/summernote
$("#textareaid").summernote({
toolbar:[
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
],
height: 250,
focus: true
});
$("#summernotediv").code("");
$('.note-help-dialog .row-fluid >p').hide();
$('.note-editable').css('overflow','auto');
$('.note-image-input').prev('h5').remove();
$('.note-image-input').remove();
+3
source to share
4 answers
you can do it with callback object and preventDefault.
This example has a limit of 400.
function registerSummernote(element, placeholder, max, callbackMax) {
$(element).summernote({
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']]
],
placeholder,
callbacks: {
onKeydown: function(e) {
var t = e.currentTarget.innerText;
if (t.trim().length >= max) {
//delete key
if (e.keyCode != 8)
e.preventDefault();
// add other keys ...
}
},
onKeyup: function(e) {
var t = e.currentTarget.innerText;
if (typeof callbackMax == 'function') {
callbackMax(max - t.trim().length);
}
},
onPaste: function(e) {
var t = e.currentTarget.innerText;
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
var all = t + bufferText;
document.execCommand('insertText', false, all.trim().substring(0, 400));
if (typeof callbackMax == 'function') {
callbackMax(max - t.length);
}
}
}
});
}
$(function(){
registerSummernote('.summernote', 'Leave a comment', 400, function(max) {
$('#maxContentPost').text(max)
});
});
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="summernote"></div>
</div>
<div class="col-xs-12 text-right">
<span id="maxContentPost"></span>
</div>
</div>
</div>
+16
source to share
Building on Angel Fraga Parodi's answer, I've added a few more key codes that should always be allowed like delete, arrow keys, or ctrl + x / ctrl + c. Also the embed code didn't work (anymore). Here's an updated version:
<div class="summernote" ></div>
<h5 id="maxContentPost" style="text-align:right"></h5>
<script>
$(document).ready(function () {
$('.summernote').summernote({
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']]
],
placeholder: 'Leave a comment ...',
callbacks: {
onKeydown: function (e) {
var t = e.currentTarget.innerText;
if (t.trim().length >= 400) {
//delete keys, arrow keys, copy, cut
if (e.keyCode != 8 && !(e.keyCode >=37 && e.keyCode <=40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey))
e.preventDefault();
}
},
onKeyup: function (e) {
var t = e.currentTarget.innerText;
$('#maxContentPost').text(400 - t.trim().length);
},
onPaste: function (e) {
var t = e.currentTarget.innerText;
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
var maxPaste = bufferText.length;
if(t.length + bufferText.length > 400){
maxPaste = 400 - t.length;
}
if(maxPaste > 0){
document.execCommand('insertText', false, bufferText.substring(0, maxPaste));
}
$('#maxContentPost').text(400 - t.length);
}
}
});
});
</script>
+1
source to share
use the onKeydown callback to check the current content length of the editor and possibly prevent further input if that value is greater than or equal to the maximum duration of your selection.
onKeydown: function(e) {
if (e.keyCode == 8 /*and other buttons that should work even if MAX_LENGTH is reached*/)
return;
if ($(".note-editable").text().length >= MAX_LENGTH){
e.preventDefault();
return;
}
},
0
source to share
I wrote this jquery solution based on the Summernote class .note-editable
.
//Contador de Caracteres para summernote
$(".note-editable").on("keypress", function(){
var limiteCaracteres = 255;
var caracteres = $(this).text();
var totalCaracteres = caracteres.length;
//Update value
$("#total-caracteres").text(totalCaracteres);
//Check and Limit Charaters
if(totalCaracteres >= limiteCaracteres){
return false;
}
});
To display the number of characters, just add <span id="total-caracteres"></span>
after <div class="summernote"></div>
.
0
source to share