Setting max length in summernote
you can make it with callback object and preventDefault function.
This sample is with 400 limit.
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.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.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>
Based on Angel Fraga Parodi's answer I added some more keyCodes that should always be allowed like delete, arrow keys or ctrl+x/ctrl+c. Also the code for pasting wasn't working (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, select all
if (e.keyCode != 8 && !(e.keyCode >=37 && e.keyCode <=40) && e.keyCode != 46 && !(e.keyCode == 88 && e.ctrlKey) && !(e.keyCode == 67 && e.ctrlKey) && !(e.keyCode == 65 && 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>