Limiter le nombre de caractères dans tinyMCE
Im en utilisant tinyMCe
pour mon projet.Tout fonctionne bien, mais maintenant, je veux limiter le nombre de caractère à insérer dans 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
});
j'ai utilisé: -
max_chars : "10",
max_chars_indicator : "lengthBox",
mais ne fonctionne toujours pas.Merci à l'avance.
14 réponses
cela fonctionne dans tinyMCE 4.3.12 et capture également collage:
EDIT: correction de bugs et extension du code pour afficher un compteur de caractères sous l'éditeur. Peut-être pas la meilleure façon car il repose un peu sur la structure HTML actuelle de tinyMCE ayant l'éditeur div avant le textarea caché.
cette version ne compte que la longueur du texte et ignore la longueur de la balise HTML. Pour compter toute la longueur HTML, remplacer tous les " 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 la pâte de tinyMCE?
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>
les Réponses ci-dessus étaient grandes! J'ai fait un petit amendement pour que nous puissions 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;
}
});
}
fournissant un support pour l'espace arrière et les touches de suppression. 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);
}
});
il n'y a pas de paramètre de configuration tinymce max_chars
, sauf si 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;
}
});
}
});
juste pour améliorer un peu le bon exemple donné par Vladimir Miroshnichenko, pour obtenir un compte plus précis, principalement pour les langues avec des caractères accentués.
j'inclus aussi le Javascript SpellChecker car celui du tinyMCE (4.1) ne peut plus être utilisé. Donc le 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 aussi ajouté un nombre de mots, si vous préférez Trigger l'alarme sur le mot au lieu 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,'');
without_html = without_html.replace(/…/ig,'...');
without_html = without_html.replace(/’/ig,'\'');
without_html = $.trim(without_html.replace(/&([A-za-z]{2})(?:lig);/ig,''));
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,'');
without_html = without_html.replace(/…/ig,'...');
without_html = without_html.replace(/’/ig,'\'');
without_html = $.trim(without_html.replace(/&([A-za-z]{2})(?:lig);/ig,''));
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 un peu têtue sur ce sujet...
la solution a fonctionné pour moi mais avec un petit bug. Si vous voyez le nombre de caractères n'est pas droit, c'est parce que vous utilisez
ed.on("KeyDown")
changer pour
ed.on("KeyUp")
, alors ça marchera très bien. Je n'ai pas testé avec ("Changement"). il peut aussi!
// 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
Ok avec le changement de tinyMCE4X.
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');
}
});
}
});
TinyMCE + AngularJS
Voici comment limiter le nombre maximum de caractères sur frontend en utilisant la directive ng-maxlength
de AngularJS.
Param :
ngMaxlength
Type : numéro
détails : Setsmaxlength
clé d'erreur de validation si la valeur est plus longue que maxlength.
veuillez noter que cette directive ne compte pas seulement les caractères de texte affichés, elle compte tout le texte à l'intérieur de <textarea>
en HTML comme des tags et des scripts.
tout d'abord, inclure AngularJS , TinyMCE 4 distributive, et AngularUI wrapper for 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) {
// ...
}]);
! Attention !
lire le manuel avant d'utiliser cette solution pour bien comprendre les conséquences d'une incapacité de la SCE à AngularJS: $sce service .
tinyMCE ne fournit aucun moyen de limiter le caractère et de restreindre l'utilisateur à entrer plus de caractère, la seule façon est d'utiliser tout plugin explicite ou votre logique pour elle. Ci-dessous code show question soulevée avec moi, il fonctionne correctement.
utilisé sur les textarea ayant un id summary
et un autre ID paragrap character_count
utilisé pour montrer le nombre de caractères. L'utilisateur n'est pas en mesure d'entrer plus de caractères que la limite max
, dans ce cas, seule la touche backspace 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;
};
voie la plus facile:
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;
}
});
La solution ci-dessous fonctionne bien pour moi:
1 - dans le code html de la textarea, il est nécessaire d'inclure la valeur de maxlength et l'id du textarea.
2-partie script, code ci-dessous. Si vous voulez, 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>
Thariama réponses était génial juste mis en œuvre et que c'était juste ce que je cherchais, juste fait quelques modifications:
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;
}
});
}
Merci Thariama.