javascript - ejemplos - Limita el número de caracteres en tinyMCE

tinymce toolbar options

Question

Estoy usando tinyMCe para mi proyecto. tinyMCe funciona bien, pero ahora quiero restringir el número de caracteres que se insertarán en tinyMce textarea

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

Solía ​​:-

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

Pero todavía no funciona. Gracias de antemano.

Answer 1

TinyMCE + AngularJS

Aquí le mostramos cómo puede limitar el número máximo de caracteres en la interfaz usando la directiva ng-maxlength de AngularJS.

Param : ngMaxlength
Tipo : numero
Detalles : Establece la clave de error de validación de maxlength si el valor es más largo que maxlength.

Tenga en cuenta que esta directiva no solo cuenta los caracteres de texto mostrados, sino que cuenta todo el texto dentro de <textarea> en HTML como etiquetas y scripts.

En primer lugar, incluya AngularJS , TinyMCE 4 distributivo y envoltorio AngularUI para 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

! Atención !

Lea el manual antes de usar esta solución para comprender completamente las consecuencias de deshabilitar SCE en el servicio AngularJS: $ sce .

Answer 2

¡Las respuestas anteriores fueron geniales! He hecho una pequeña enmienda para que podamos establecer max_chars agregándola como un atributo al elemento textarea.

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

Answer 3

De acuerdo con el nuevo pequeño tinyMCE4X, las cosas cambian un poco.

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

Answer 4

Esta es la solución que funcionó para mí.

Básicamente tomé el código provisto por @needfulthing y reparé los errores y lo mejoré.

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

}

Answer 5

Esto funciona en tinyMCE 4.3.12 y también captura el pegado:

EDITAR: Se corrigieron errores y código extendido para mostrar un contador de caracteres en el editor. Posiblemente no sea la mejor manera, ya que se basa un poco en la estructura HTML actual de tinyMCE que tiene el editor div antes del área de texto oculta.

Esta versión solo cuenta la longitud del texto e ignora la longitud de la etiqueta HTML. Para contar la longitud completa de HTML, reemplace todo "innerText" con "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;
}

Referencia: ¿Cómo puedo prevenir el evento de pegado de tinyMCE?

Answer 6

La solución a continuación funciona bien para mí: 1 - en el código html del área de texto es necesario incluir el valor de maxlength e id de textarea.
2 - en la parte del guión, código abajo. Si lo desea, elimine el comentario de la línea de alerta () y ponga su mensaje.

<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>

Answer 7

La solución funcionó para mí pero con un pequeño error. Si ves que el recuento de caracteres no es correcto, eso es porque usas

ed.on("KeyDown")

cambiarlo a

ed.on("KeyUp") 

, entonces funcionará bien. No lo he probado con (''Cambiar''). ¡Puede que funcione también!

Answer 8

Las respuestas de Thariama fueron increíbles, solo lo implementé y fue justo lo que estaba buscando, solo hice algunas modificaciones:

    max_chars : "10",
    setup : function(ed) {
        ed.onKeyDown.add(function(ed, evt) {
            if ( $(ed.getBody()).text().length+1 > ed.getParam(''max_chars'')){
                evt.preventDefault();
                evt.stopPropagation();
                return false;
            }
        });
    } 

Gracias Thariama.

Answer 9

No hay configuración de configuración de max_chars , excepto que usted mismo lo implementa:

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

      });
   }
});

Answer 10

Proporcionar soporte para retroceder y eliminar claves. Mi 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);
    }
});

Answer 11

Solo para mejorar un poco el buen ejemplo dado por Vladimir Miroshnichenko, para obtener un conteo más preciso, principalmente para idiomas con caracteres acentuados.

También incluyo el Javascript SpellChecker ya que el tinyMCE''s one (4.1) ya no se puede usar. Así que el ed.addButton () incluirá un botón en la barra de herramientas para llamar a $ Spelling.SpellCheckInWindow (''editores''). Eso funciona perfectamente con tinyMCE 4.1.7.

También agregué un conteo de palabras, si prefieres activar la alarma en palabras en lugar de caracteres.

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

Espero que sirva de ayuda ya que el equipo de tinyMCE parece ser un poco terco en este tema ...

Answer 12

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>

Answer 13

la manera más fácil:

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.

para evitar pegar:

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

Answer 14

tinyMCE no proporciona ninguna manera de limitar el carácter y restringir al usuario para que ingrese más caracteres, la única forma es usar un complemento explícito o su lógica para ello. Debajo del código muestra el problema planteado conmigo, está funcionando correctamente.

Esto se usa en el área de texto que tiene un summary ID y otro character_count identificación de paragrap que utiliza para mostrar el recuento de caracteres. El usuario no puede ingresar más caracteres que el límite max , en este caso solo funciona la tecla de retroceso. Puede utilizar cualquier clave de forma gratuita dando un valor ascii si la clave está en condiciones.

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

Answer 15

    // 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

Espero eso ayude