10/01/2020
summernote com limite de caracteres
SUMMERNOTE: Limit size of posted content
Esses dias precisei de adicionar uma regra para limitar a quantidade de caracteres no Plugin Summernote.js e em seguida notei que precisava filtra as tags html no momento da contagem dos caracteres.
Bibliotecas utilizadas:
1º importamos as bibliotecas:
<link href="bootstrap.css" type="text/css"/> <link href="summernote-bs4.css" type="text/css"/> <script src="bootstrap.min.js"></script> <script src="summernote-bs4.min.js"></script> <script src="summernote-ext-maxlength.js"></script>
2º adicionamos o código html com a estrutura do Bootstrap:
<div class="col-12"> <div class="form-group"> <label for="campo01">Descrição</label> <textarea maxlength="2000" rows="3" type="text" name="campo01" placeholder="Descrição.." class="form-control maxSummerNote" id="campo01"></textarea> </div> </div>
3º vamos estruturar o Javascript com o jQuery e demais dependencias :
jQuery(document).ready(function($){ $('.maxSummerNote').summernote({ minHeight:100, maxHeight:300, maxlength: 2000, toolbar: [ ['font', ['bold', 'italic', 'underline', 'clear']] ,['color', ['color']] ,['para', ['ul', 'ol', 'paragraph']] ,['view', ['codeview', 'help']] ] }); });
Agora chamo atenção para a parte do código onde limita a quantidade de caracteres e filtra as tags em html:
self.toggle($editable.html().replace(/(<([^>]+)>)/ig,"").length); $editable.on('keyup', function(){ var length = $editable.html().replace(/(<([^>]+)>)/ig,"").length; self.toggle(length); });
Código fonte do arquivo summernote extension maxlength:
summernote-ext-maxlength.js
(function (factory) { /* global define */ if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['jquery'], factory); } else if (typeof module === 'object' && module.exports) { // Node/CommonJS module.exports = factory(require('jquery')); } else { // Browser globals factory(window.jQuery); } }(function ($) { // Extends plugins for print plugin. $.extend($.summernote.plugins, { /** * @param {Object} context - context object has status of editor. */ maxlength: function (context) { var self = this; var layoutInfo = context.layoutInfo; var $editor = layoutInfo.editor; var $editable = layoutInfo.editable; var $statusbar = layoutInfo.statusbar; var maxlength = $editor.parent().find('textarea').attr('maxlength'); if (maxlength) { self.$label = null; self.initialize = function () { // var label = ui.button({contents:"hi"}); var label = document.createElement("span"); self.$label = $(label); self.$label.addClass('bootstrap-maxlength badge badge-success'); self.$label.css({position: 'absolute', left:'50%', transform:'translateX(-50%)'}); $statusbar.append(self.$label); self.toggle($editable.html().replace(/(<([^>]+)>)/ig,"").length); $editable.on('keyup', function(){ var length = $editable.html().replace(/(<([^>]+)>)/ig,"").length; self.toggle(length); }); }; self.toggle = function(length){ self.$label.text(length +" / "+ maxlength); if(length >= maxlength){ self.$label.addClass('badge-danger'); self.$label.removeClass('badge-success'); }else{ self.$label.addClass('badge-success'); self.$label.removeClass('badge-danger'); } }; } } }); }));
0 Comentário