Javascript TinyMCE 文本编辑器最大字符限制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11790474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TinyMCE text editor max char limit
提问by Prathamesh mhatre
I am using TinyMCE for <textarea>. My requirement is to limit the character size to 2000 and also to show the remaining characters somewhere below the tool bar. I somehow managed to get the characters number; now I am stuck with displaying the remaining characters and prevent from exceeding limit.
我将 TinyMCE 用于<textarea>. 我的要求是将字符大小限制为 2000，并在工具栏下方的某处显示剩余的字符。我以某种方式设法获得了字符数；现在我坚持显示剩余的字符并防止超过限制。
Here is my TinyMCE code
这是我的 TinyMCE 代码
tinyMCE.init({
// General options
mode : "textareas",
theme : "simple",
plugins : "autolink,lists,pagebreak,style,table,save,advhr,advimage,
advlink,emotions,media,noneditable,visualchars,nonbreaking,
xhtmlxtras,template",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,
justifyleft,justifycenter,justifyright,
justifyfull,|,styleselect,formatselect,
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",
theme_advanced_resizing : true,
charLimit : 10, // this is a default value which can get modified later
setup : function(ed) {
//peform this action every time a key is pressed
ed.onKeyUp.add(function(ed, e) {
//define local variables
var tinymax, tinylen, htmlcount;
//manually setting our max character limit
tinymax = ed.settings.charLimit;
//grabbing the length of the curent editors content
tinylen = ed.getContent().replace(/(<([^>]+)>)/ig,"").length;
//setting up the text string that will display in the path area
htmlcount = "HTML Character Count: " + tinylen + "/" + tinymax;
//if the user has exceeded the max turn the path bar red.
if (tinylen>tinymax){
}
});
}
});
For testing purpose I am trying to limit up to 10 char.
Any suggestions are welcome.
出于测试目的，我试图限制最多 10 个字符。
欢迎任何建议。
回答by Thariama
I suggest you execute your code onKeyDown, because on KeyUp the letter is already in the editor.
我建议您在 KeyDown 上执行您的代码，因为在 KeyUp 上，该字母已经在编辑器中。
//peform this action every time a key is pressed
ed.onKeyDown.add(function(ed, e) {
//define local variables
var tinymax, tinylen, htmlcount;
//manually setting our max character limit
tinymax = ed.settings.charLimit;
//grabbing the length of the curent editors content
tinylen = ed.getContent().replace(/(<([^>]+)>)/ig,"").length;
//setting up the text string that will display in the path area
htmlcount = "HTML Character Count: " + tinylen + "/" + tinymax;
//if the user has exceeded the max turn the path bar red.
if (tinylen > tinymax){
// place text string in path bar
if ( $('#max_char_string').size() ){
$('#max_char_string').html( ' ' + htmlcount);
}
else {
$("div#"+ed.id+"_path_row").append('<span id="max_char_string"> '+htmlcount+'</span>')
}
// prevent insertion of typed character
e.preventDefault();
e.stopPropagation();
return false;
}
回答by John Magnolia
I had the same issue and found this link very useful: http://www.ryann.ca/?p=186
我遇到了同样的问题，发现这个链接非常有用：http: //www.ryann.ca/?p= 186
Although I changed this slightly so that it reads the attribute of maxlength direct from the textarea.
虽然我稍微改变了这一点，以便它直接从 textarea 读取 maxlength 的属性。
tinyMCE.init({
// Options
setup : function(ed) {
ed.onKeyUp.add(function(ed, e) {
var tinylen, htmlcount, maxlength = $("#" + tinyMCE.activeEditor.id).attr("maxlength");
if (maxlength) {
// grabbing the length of the curent editors content
tinylen = ed.getContent().length;
htmlcount = "HTML Character Count: " + tinylen + "/" + maxlength;
if (tinylen > maxlength) {
htmlcount = "<span style='font-weight:bold; color: #f00;'>" + htmlcount + "</span>";
}
// write the html count into the path row of the active editor
tinymce.DOM.setHTML(tinymce.DOM.get(tinyMCE.activeEditor.id+ '_path_row'), htmlcount);
}
});//ed.onKeyUp.add
}//setup
});
回答by Sdd Sdei
Hope it will work :)
希望它会起作用:)
setup: function(ed) {
var maxlength = parseInt($('#'+(ed.id)).attr("maxlength"));
var count = 0;
ed.on('keydown', function(e) {
count++;
if (count >= maxlength)
{
alert("false");
return false;
}
});
},
