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>

Precisa desenvolver um sistema em php? Clique aqui e saiba como fazer!

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']]
        ]
    });
});

Precisa de suporte para sistema em php? Clique aqui, fale comigo!

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');
                    }
                };
            }
        }
    });
}));