TinyMCE 文本编辑器最大字符限制
Posted
技术标签:
【中文标题】TinyMCE 文本编辑器最大字符限制【英文标题】:TinyMCE text editor max char limit 【发布时间】:2012-08-01 04:37:05 【问题描述】:我正在为<textarea>
使用 TinyMCE。我的要求是将字符大小限制为 2000,并在工具栏下方的某处显示剩余的字符。我以某种方式设法获得了字符数;现在我坚持显示剩余的字符并防止超出限制。
这是我的 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)
);
);
出于测试目的,我试图限制最多 10 个字符。 欢迎提出任何建议。
【问题讨论】:
可能会有所帮助:***.com/questions/5533053/textarea-character-limit 我之前没有使用 tinymce,但 redactor 使用 textarea,所以我假设 tinymce 也在使用 textarea。 感谢您的回复,但 textarea 的正常限制不适用于 tincymce。 Limit the number of character in tinyMCE的可能重复 【参考方案1】:我建议你在 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;
【讨论】:
【参考方案2】:我遇到了同样的问题,发现这个链接非常有用:http://www.ryann.ca/?p=186
虽然我稍微改变了这一点,以便它直接从 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
);
【讨论】:
运行您的解决方案时,出现“ed.onKeyUp is undefined”错误。我该如何解决?谢谢!我使用的是 4.0.4 版。 您需要确保这是在setup : function(ed)
内查看更新的答案。
约翰,非常感谢您回复我。我点击了你提到的链接(ryann.ca/?p=186),function(ed) 确实是 setup 的属性值,这是一个选项。您使用的是 tinyMCE 4.x 吗?谢谢!
嗨,约翰,我发现了这个:***.com/questions/16939148/…。似乎事件 API 在 tinyMCE 4 中发生了更改。您介意发布另一个符合 tinyMCE 4 的回复吗?谢谢!【参考方案3】:
希望它会起作用:)
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;
);
,
【讨论】:
以上是关于TinyMCE 文本编辑器最大字符限制的主要内容,如果未能解决你的问题,请参考以下文章