How can I apply a maxlength to Summernote? Applying a maxlength to the textarea does not 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();
Answer
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>