即时通讯使用tinyMCe我project.Everything工作正常，但现在我想限制将要插入字符的数量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
});
我用了 ：-
max_chars : "10",
max_chars_indicator : "lengthBox",
但仍然没有事先working.Thanks。
Answer 1:
这部作品在tinyMCE的4.3.12，也捕获粘贴：
编辑：修正错误和扩展代码以显示编辑下一个字符计数器。 也许不能，因为它依赖于具有隐藏的文本区域之前编辑DIV tinyMCE的当前HTML结构的位的最佳途径。
这个版本只计算文本长度，而忽略HTML标签的长度。 要计算全HTML长度，全部替换“的innerText”与“的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;
}
参考文献： 我怎样才能防止了tinyMCE的粘贴事件？
Answer 2:
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 3:
以上答案是伟大的！ 我做了一个小的修改，这样我们就可以把它作为textarea元素本身的属性设置MAX_CHARS
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 4:
提供支持，退格键和删除键。 我的版本：
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 5:
// 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
希望能帮助到你
Answer 6:
没有TinyMCE的配置设置max_chars ，除了你自己实现：
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 7:
只是为了提高一点点弗拉基米尔·Miroshnichenko给出的很好的例子，以获得更准确计数，主要用于重音字符的语言。
我也inlcude JavaScript的拼写检查为TinyMCE的的一个（4.1）不能再使用了。 所以ed.addButton（）将包括工具栏调用$ Spelling.SpellCheckInWindow（“编辑”）中的一个按钮。 这完全与TinyMCE的4.1.7工作。
我还添加单词的数量，如果你喜欢来触发的话，而不是人物的报警。
<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(/…/ig,'...');
without_html = without_html.replace(/’/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(/…/ig,'...');
without_html = without_html.replace(/’/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();
});
我希望这将有助于为TinyMCE的球队似乎对这个问题有点固执...
Answer 8:
该解决方案为我工作，但有一个小bug。 如果你看到的字符数是不对的，那是因为你用
ed.on("KeyDown")
将其更改为
ed.on("KeyUp")
，然后它会正常工作。 我还没有与（“更改”）进行了测试。 它可以工作了！
Answer 9:
确定新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');
}
});
}
});
Answer 10:
这是为我工作的解决方案。
我基本上采取了由@needfulthing提供的代码，并修复错误和改进它。
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 11:
TinyMCE的+ AngularJS
下面是如何使用限制在前端的字符的最大数量ng-maxlength指令从AngularJS。
帕拉姆 ： ngMaxlength
类型 ：数值
详细信息 ：设置maxlength验证错误的关键，如果该值超过最大长度。
请注意，这个指令并不仅仅算上显示字符，它计算里面的所有文字<textarea>在HTML的标签和脚本。
首先，包括AngularJS ， TinyMCE的 4分配，并为TinyMCE的AngularUI包装 。
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
！ 注意！
：使用此解决方案，充分认识禁止在AngularJS SCE的后果之前，请先阅读本手册$ SCE服务 。
Answer 12:
TinyMCE的不提供任何形式限制的特点和限制用户输入更多字符，唯一的办法就是使用任何明确的插件或你为它的逻辑。 下面我提出的代码显示的问题，这是正常工作。
这是用来在具有textarea的ID summary和彼此paragrap ID character_count是用来显示字符数。 用户不能比输入更多的字符max限制，Inthis情况下，只有退格键工作。 您可以自由通过，如果在条件的关键赋予ASCII值使用任意键。
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 13:
最简单的方法：
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.
防止贴：
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:
以下解决方案的工作对我好：1 - 在textarea的HTML代码，需要包括最大长度和文本区域的id的值。
2 - 脚本的一部分，下面的代码。 如果你想，取消警报（）线，并把您的消息。
<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 15:
Thariama的答案是真棒只是实现它，它正是我一直在寻找，只是做了一些修改：
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;
}
});
}
谢谢Thariama。
文章来源: Limit the number of character in tinyMCE
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://img.manongdao.com/sparkler-677774__340.jpg', '推荐 女痞 的文章《限制字符的tinyMCE的数量限制字符的tinyMCE的数量(Limit the number of》','https://www.manongdao.com/article-946860.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}