web-dev-qa-db-fra.com

Limiter le nombre de caractères dans tinyMCE

J'utilise tinyMCe pour mon projet. Tout fonctionne correctement, mais maintenant je veux limiter le nombre de caractères à insérer dans tinyMce 

tinyMCE.init({
// General options
mode : "textareas",
theme : "simple",
plugins : "autolink,lists,pagebreak,style,table,save,advhr,advimage,advlink,emotions,media,noneditable,nonbreaking",

// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect",
theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,code,|,forecolor,backcolor",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
max_chars : "10",
max_chars_indicator : "lengthBox",
theme_advanced_resizing : true
});

J'ai utilisé :-

max_chars : "10",
max_chars_indicator : "lengthBox",

mais ne fonctionne toujours pas. Merci d'avance.

javascripttinymcerte
23
Rakesh Shetty

Cela fonctionne dans tinyMCE 4.3.12 et capture également le collage:

EDIT: Correction de bugs et de code étendu pour afficher un compteur de caractères sous l'éditeur. Peut-être pas la meilleure solution car elle repose un peu sur la structure HTML actuelle de tinyMCE avec l'éditeur div avant la zone de texte masquée.

Cette version ne compte que la longueur du texte et ignore la longueur de la balise HTML. Pour compter la longueur complète du code HTML, remplacez tout "innerText" par "innerHTML".

tinymce.init({
    max_chars: 1000, // max. allowed chars
    setup: function (ed) {
        var allowedKeys = [8, 37, 38, 39, 40, 46]; // backspace, delete and cursor keys
        ed.on('keydown', function (e) {
            if (allowedKeys.indexOf(e.keyCode) != -1) return true;
            if (tinymce_getContentLength() + 1 > this.settings.max_chars) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
            return true;
        });
        ed.on('keyup', function (e) {
            tinymce_updateCharCounter(this, tinymce_getContentLength());
        });
    },
    init_instance_callback: function () { // initialize counter div
        $('#' + this.id).prev().append('<div class="char_count" style="text-align:right"></div>');
        tinymce_updateCharCounter(this, tinymce_getContentLength());
    },
    paste_preprocess: function (plugin, args) {
        var editor = tinymce.get(tinymce.activeEditor.id);
        var len = editor.contentDocument.body.innerText.length;
        var text = $(args.content).text();
        if (len + text.length > editor.settings.max_chars) {
            alert('Pasting this exceeds the maximum allowed number of ' + editor.settings.max_chars + ' characters.');
            args.content = '';
        } else {
            tinymce_updateCharCounter(editor, len + text.length);
        }
    }
});

function tinymce_updateCharCounter(el, len) {
    $('#' + el.id).prev().find('.char_count').text(len + '/' + el.settings.max_chars);
}

function tinymce_getContentLength() {
    return tinymce.get(tinymce.activeEditor.id).contentDocument.body.innerText.length;
}

Référence: Comment puis-je prévenir l'événement de collage de tinyMCE?

16
needfulthing

TinyMCE 4+
+
jQuery

<textarea id="description_edit" name="description_edit"><?=htmlspecialchars($this->company->description);?></textarea>

<div><span>Characters left:</span> <span id="chars_left"></span></div>


<script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script>
<script>
    var max_chars = 200; //max characters
    var max_for_html = 300; //max characters for html tags
    var allowed_keys = [8, 13, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 46];
    var chars_without_html = 0;

    function alarmChars() {
        if (chars_without_html > (max_chars - 25)) {
            $('#chars_left').css('color', 'red');
        } else {
            $('#chars_left').css('color', 'gray');
        }
    }

    $(function () {
        tinymce.init({
            selector: "#description_edit",
            theme: "modern",
            width: 320,
            height: 130,
            plugins: [
                "advlist autolink lists charmap print preview hr anchor pagebreak",
                "searchreplace visualblocks visualchars code insertdatetime media nonbreaking",
                "save table contextmenu directionality paste textcolor"
            ],
            image_advtab: true,
            language: 'en',
            menubar: false,
            statusbar: false,

            setup: function (ed) {
                ed.on("KeyDown", function (ed, evt) {
                    chars_without_html = $.trim(tinyMCE.activeEditor.getContent().replace(/(<([^>]+)>)/ig, "")).length;
                    chars_with_html = tinyMCE.activeEditor.getContent().length;
                    var key = ed.keyCode;

                    $('#chars_left').html(max_chars - chars_without_html);

                    if (allowed_keys.indexOf(key) != -1) {
                        alarmChars();
                        return;
                    }

                    if (chars_with_html > (max_chars + max_for_html)) {
                        ed.stopPropagation();
                        ed.preventDefault();
                    } else if (chars_without_html > max_chars - 1 && key != 8 && key != 46) {
                        alert('Characters limit!');
                        ed.stopPropagation();
                        ed.preventDefault();
                    }
                    alarmChars();
                });
            },

            toolbar: "bold italic underline | alignleft aligncenter alignright alignjustify | forecolor backcolor | bullist numlist | charmap",
            style_formats: [
                {title: 'Bold text', inline: 'b'},
                {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                {title: 'Example 1', inline: 'span', classes: 'example1'},
                {title: 'Example 2', inline: 'span', classes: 'example2'},
                {title: 'Table styles'},
                {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
            ]
        });

        chars_without_html = $.trim($("#description_edit").text().replace(/(<([^>]+)>)/ig, "")).length;
        $('#chars_left').html(max_chars - chars_without_html);
        alarmChars();
    });
</script>
10
Vladimir Miroshnichenko

Les réponses ci-dessus étaient super! J'ai apporté une petite modification afin de pouvoir définir max_chars en l'ajoutant comme attribut à l'élément textarea lui-même.

setup : function(ed) {
        ed.onKeyDown.add(function(ed, evt) {
            //if ( $(ed.getBody()).text().length+1 > ed.getParam('max_chars')){
            if ( $(ed.getBody()).text().length+1 > $(tinyMCE.get(tinyMCE.activeEditor.id).getElement()).attr('max_chars')){
                evt.preventDefault();
                evt.stopPropagation();
                return false;
            }
        });
    }
9
Keen Wong

Fournir un soutien pour le retour arrière et supprimer des clés. Ma version:

max_chars : 2000,
max_chars_indicator : ".maxCharsSpan",

setup : function(ed) {  
    wordcount = 0;
    wordCounter = function (ed, e) {
        text = ed.getContent().replace(/<[^>]*>/g, '').replace(/\s+/g, ' ');
        text = text.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        this.wordcount = ed.getParam('max_chars') - text.length;
        $(ed.getParam('max_chars_indicator')).text( this.wordcount + " (out of " +ed.getParam('max_chars')+ ") char(s) left." );
    };

    ed.onKeyUp.add( wordCounter );

    ed.onKeyDown.add(function(ed, e) {
    if (this.wordcount <= 0 && e.keyCode != 8 && e.keyCode != 46) {
         tinymce.dom.Event.cancel(e);
    }
});
4
a0z0ra

Juste pour améliorer un peu le bon exemple donné par Vladimir Miroshnichenko, pour obtenir un décompte plus précis, principalement pour les langues avec des caractères accentués.

J'inclus également le Javascript SpellChecker car celui de tinyMCE (4.1) ne peut plus être utilisé . Donc ed.addButton () inclura un bouton dans la barre d'outils pour appeler $ Spelling.SpellCheckInWindow ('editors'). Cela fonctionne parfaitement avec tinyMCE 4.1.7.

J'ai également ajouté un nombre de mots, si vous préférez déclencher l'alarme sur Word plutôt que sur des caractères.

<textarea id="paragraph1" name="description_edit"><?=htmlspecialchars($this->company->description);?></textarea>

<div><span>Characters left:</span> <span id="chars_left"></span></div>

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="JavaScriptSpellCheck/include.js"></script>

<script>
var max_chars    = 300; //max characters
var max_for_html = 1000; //max characters for html tags
var allowed_keys = [8, 13, 16, 17, 18, 20, 33, 34, 35,36, 37, 38, 39, 40, 46];
var chars_without_html = 0;

function alarmChars(){
    if(chars_without_html > (max_chars - 25)){
        $('#chars_left').css('color','red');
    }else{
        $('#chars_left').css('color','gray');
    }
}        

$(function() {
    tinymce.init({
        selector: "textarea#paragraph1",
        theme: "modern",
        plugins: [
            "advlist autolink lists charmap preview hr anchor pagebreak",
            "visualblocks visualchars insertdatetime nonbreaking",
            "directionality paste textcolor"
        ],
        menubar:false,
        statusbar:false,

        toolbar: "bold italic underline | alignleft aligncenter alignright alignjustify | forecolor backcolor | bullist numlist | charmap | preview | Spellcheck", 

        setup : function(ed) {
            ed.addButton('Spellcheck', {
                title : 'Spellcheck',
                image : '/img/dict.png',
                onclick : function() {
                    // Add you own code to execute something on click
                    $Spelling.SpellCheckInWindow('editors');
                }
            });

            ed.on("KeyDown", function(ed,evt) {
                    whtml = tinyMCE.activeEditor.getContent();

                    without_html = whtml.replace(/(<([^>]+)>)/ig,"");
                    without_html = without_html.replace(/&([A-za- z])(?:acute|cedil|caron|circ|Grave|orn|ring|slash|th|tilde|uml);/ig,'$1');
                    without_html = without_html.replace(/&hellip;/ig,'...');
                    without_html = without_html.replace(/&rsquo;/ig,'\'');
                    without_html = $.trim(without_html.replace(/&([A-za-z]{2})(?:lig);/ig,'$1'));

                    chars_without_html = without_html.length;
                    chars_with_html    = whtml.length;

                    wordscount = without_html.split(/[ ]+/).length;  // Just to get the wordcount, in case...

                    var key = ed.keyCode;

                    $('#chars_left').html(max_chars - chars_without_html);

                    if(allowed_keys.indexOf(key) != -1){
                        alarmChars();
                        return;                                                         
                    }

                    if (chars_with_html > (max_chars + max_for_html)){
                        ed.stopPropagation();
                        ed.preventDefault();
                    }else if (chars_without_html > max_chars-1 && key != 8 && key != 46){
                        alert('Characters limit!');
                        ed.stopPropagation();
                        ed.preventDefault();
                    }
                    alarmChars();                                                   
                }
            );
        },
    });

    whtml = $("#paragraph1").text();

    without_html = whtml.replace(/(<([^>]+)>)/ig,"");
    without_html = without_html.replace(/&([A-za-z])(?:acute|cedil|caron|circ|Grave|orn|ring|slash|th|tilde|uml);/ig,'$1');
    without_html = without_html.replace(/&hellip;/ig,'...');
    without_html = without_html.replace(/&rsquo;/ig,'\'');
    without_html = $.trim(without_html.replace(/&([A-za-z]{2})(?:lig);/ig,'$1'));

    chars_without_html = without_html.length;

    $('#chars_left').html(max_chars - chars_without_html);
    alarmChars();                                           
});

J'espère que cela aidera car l'équipe de tinyMCE semble être un peu têtue à ce sujet ...

2
fralbo

la solution a fonctionné pour moi mais avec un petit bug. Si vous voyez que le nombre de caractères n’est pas correct, c’est que vous utilisez

ed.on("KeyDown")

changez le en

ed.on("KeyUp")

, alors cela fonctionnera bien. Je n'ai pas testé avec ('Change'). ça peut marcher aussi!

2
Ghodrat Ashournia
    // Returns text statistics for the specified editor by id
function getStats(id) {
    var body = tinymce.get(id).getBody(), text = tinymce.trim(body.innerText || body.textContent);

    return {
        chars: text.length,
        words: text.split(/[\w\u2019\'-]+/).length
    };
} 





function submitForm() {
        // Check if the user has entered less than 10 characters
        if (getStats('content').chars < 10) {
            alert("You need to enter 1000 characters or more.");
            return;
        }

        // Check if the user has entered less than 1 words
        if (getStats('content').words < 1) {
            alert("You need to enter 1 words or more.");
            return;
        }

        // Submit the form
        document.forms[0].submit();
    }

http://www.tinymce.com/wiki.php/How_to_limit_number_of_characters/words

J'espère que ça aide 

2
Ziinloader

Il n'y a pas de paramètre de configuration tinymce max_chars, sauf que vous l'implémentez vous-même

tinyMCE.init({
   ...
   max_chars : "10",
   setup : function(ed) {
      ed.onKeyDown.add(function(ed, evt) {

        if ( $(ed.getBody()).text().length > ed.getParam('max_char')){
          e.preventDefault();
          e.stopPropagation();
          return false;
        } 

      });
   }
});
2
Thariama

Ok avec le nouveau tinyMCE4X, ça change un peu.

    tinymce.init({
    charLimit : 10, // this is a default value which can get modified later
    setup: function(editor) {
        editor.on('change', function(e) {
            //define local variables
            var tinymax, tinylen, htmlcount;
            //setting our max character limit
            tinymax = this.settings.charLimit;
            //grabbing the length of the curent editors content
            tinylen = this.getContent().length;
            if (tinylen > tinymax) {
                alert('to big');
            }
        });
    }
    });
1
Paulo Almeida

La solution ci-dessous fonctionne bien pour moi:.
2 - dans la partie script, code ci-dessous. Si vous le souhaitez, décommentez la ligne alert () et mettez votre message.

<script type="text/javascript">
  tinymce.init ({
    ...
    ...
      setup: function(ed) {
        var maxlength = parseInt($("#" + (ed.id)).attr("maxlength"));
        var count = 0;
        ed.on("keydown", function(e) {
          count++;
          if (count > maxlength) {
            // alert("You have reached the character limit");
            e.stopPropagation();
            return false;
          }
        });
     },
<textarea type="text" id="test" name="test" maxlength="10"></textarea>

0
Brasil

manière la plus simple:

contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length; //takes lenght of current editor

if (contentContentLenght > 1499) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                } // 1500 is my limit in mine project.

pour empêcher la pâte:

editor.on('paste', function(e){
            contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length;
            var data = e.clipboardData.getData('Text');
            if (data.length > (1500 - contentContentLenght)) {
                return false;
            } else {
                return true;
            }
        });
0
DanielWaw

C'est la solution qui a fonctionné pour moi. 

En gros, j'ai pris le code fourni par @needfulthing et corrigé les erreurs pour l’améliorer.

function initTinymce(){

        tinymce.init({
            selector: '.richtext-editable',
            plugins: ['paste'],

            max_chars: 50000, // max. allowed chars

            setup: function (ed) {                              
                var allowedKeys = [8, 13, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 46];
                ed.on('keydown', function (e) {
                    if (allowedKeys.indexOf(e.keyCode) != -1) return true;
                    if (tinymce_getContentLength() + 1 > this.settings.max_chars) {
                        e.preventDefault();
                        e.stopPropagation();
                        return false;
                    }
                    return true;
                });
                ed.on('keyup', function (e) {
                    tinymce_updateCharCounter(this, tinymce_getContentLength());
                });                             
            },

            init_instance_callback: function () { // initialize counter div
                $('#' + this.id).prev().append('<div class="char_count" style="text-align:right"></div>');
                tinymce_updateCharCounter(this, tinymce_getContentLength());
            },

            paste_preprocess: function (plugin, args) {                             
                var editor = tinymce.get(tinymce.activeEditor.id);
                var len = editor.contentDocument.body.innerText.length;                             
                if (len + args.content.length > editor.settings.max_chars) {
                    alert('Pasting this exceeds the maximum allowed number of ' + editor.settings.max_chars + ' characters for the input.');
                    args.content = '';
                }                                   
                tinymce_updateCharCounter(editor, len + args.content.length);                               
            }

        });

        function tinymce_updateCharCounter(el, len) {
            $('#' + el.id).prev().find('.char_count').text(len + '/' + el.settings.max_chars);
        }

        function tinymce_getContentLength() {
            return tinymce.get(tinymce.activeEditor.id).contentDocument.body.innerText.length;
        }

}
0
mbanchero

tinyMCE ne fournit aucun moyen de limiter le caractère et d’empêcher l’utilisateur de saisir davantage de caractères, le seul moyen est d’utiliser un plugin explicite ou votre logique. Au-dessous de la question d’émission de code soulevée avec moi, cela fonctionne correctement.

Ceci est utilisé dans les zones de texte ayant l'identifiant summary et un autre identificateur de paragraphe, character_count, utilisé pour afficher le nombre de caractères. L'utilisateur ne peut pas entrer plus de caractères que la limite max. Dans ce cas, seule la touche de retour arrière fonctionne. Vous pouvez utiliser n'importe quelle clé en donnant la valeur ascii si la clé est en condition.

tinymce.init({
  selector: '#summary',  // change this value according to your HTML
  auto_focus: 'element1',
  statusbar: false,
  toolbar: 'undo redo | styleselect | bold italic underline | formatselect | aligncenter | fontselect',
  setup: function (ed) {
            ed.on('KeyDown', function (e) { 
                var max = 150;
                var count = CountCharacters();
                if (count >= max) {
                        if(e.keyCode != 8 && e.keyCode != 46)
                          tinymce.dom.Event.cancel(e);
                          document.getElementById("character_count").innerHTML = "Maximun allowed character is: 150";

                } else {
                    document.getElementById("character_count").innerHTML = "Characters: " + count;
                 }
            });

        }
 });

 function CountCharacters() {
    var body = tinymce.get("summary").getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};
0
Lokendra Parihar --Lok

TinyMCE + AngularJS

Donc, rien ne vous empêche de jouer avec la direction ng-maxlength von AngularJS begrenzen.

Param : ngMaxlengthname__
Typ : Nombre
Détails : Afficher le texte du livre pour maxlengthname__festival, affiché dans le journal.

Cliquez ici pour afficher le texte. Afficher le texte dans le texte, lire et écrire le texte intérieur du texte de <textarea> dans HTML avec Balises et masques.

Zunächst müssen Sie AngularJS , TinyMCE 4 distributif et AngularUI-Wrapper für TinyMCE .

HTML:

<form name="form" action="#">
    <textarea ng-model="myMCEContent" ui-tinymce ng-maxlength="200" name="body"></textarea>
    <span ng-show="form.body.$error.maxlength" class="error">Reached limit!/span>
</form>

JavaScript:

angular.module('myApp', ['ui.tinymce'])
.config(['$sceProvider', function($sceProvider) {
    // Disable Strict Contextual Escaping
    $sceProvider.enabled(false);
}])
.constant('uiTinymceConfig', {/*...*/})
.controller('myCtrl', ['$scope', function($scope) {
    // ...
}]);

jsFiddle

! Beachtung!

Lire plus de détails sur ce sujet dans les deux langues, cliquez ici pour obtenir une réponse au code secret de la langue anglaise: service de sécurité .

0
naXa