Javascript TinyMCE文本编辑器最大字符限制

我将TinyMCE用于

。我的要求是将字符大小限制为2000，并在工具栏下方的某个位置显示剩余字符。我不知怎的设法弄到了字符号；现在，我坚持显示剩余的字符，并防止超出限制

这是我的电话号码

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


        } 
        });
    }
});

tinyMCE.init({
//一般选择
模式：“文本区域”，
主题：“简单”，
插件：“自动链接、列表、分页符、样式、表格、保存、advhr、advimage、，
advlink、情感、媒体、不可编辑、可视卡、不中断、，
xhtmlxtras，模板“，
//主题选项
主题高级按钮1：“粗体、斜体、下划线、删除线、”，
正义左，正义中，正义右，
justifyfull、|、styleselect、formatselect、，
fontselect，fontsizeselect“，
主题_高级_按钮2:“bullist，numlist，|，outdent，indent，|，undo，redo，|，
链接，取消链接，锚定，图像，代码，|，前景色，
背景色“，
主题\高级\工具栏\位置：“顶部”，
主题\高级\工具栏\对齐：“左”，
主题\高级\状态栏\位置：“底部”，
主题\u高级\u大小调整：正确，
charLimit:10，//这是一个默认值，以后可以修改
设置：功能（ed）{
//每次按下一个键时，请执行此操作
ed.onKeyUp.add（函数（ed，e）{
//定义局部变量
变量tinymax、tinylen、htmlcount；
//手动设置我们的最大字符限制
tinymax=ed.settings.charLimit；
//抓住当前编辑器内容的长度
tinylen=ed.getContent（）.replace（/（]+）>）/ig，“”）.length；
//设置将显示在路径区域中的文本字符串
htmlcount=“HTML字符计数：”+tinylen+“/”+tinymax；
//如果用户已超过最大值，则将路径栏变成红色。
if（tinylen>tinymax）{
} 
});
}
});

出于测试目的，我尝试将字符数限制在10个以内。

---

欢迎任何建议。

我建议您在键入时执行代码，因为在键入时，该字母已在编辑器中

    //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( '&nbsp;' + htmlcount);
        }
        else {
          $("div#"+ed.id+"_path_row").append('<span id="max_char_string">&nbsp;'+htmlcount+'</span>')
        }

        // prevent insertion of typed character
        e.preventDefault();
        e.stopPropagation();
        return false;
      } 

//每次按下一个键时都执行此操作
ed.onKeyDown.add（函数（ed，e）{
//定义局部变量
变量tinymax、tinylen、htmlcount；
//手动设置我们的最大字符限制
tinymax=ed.settings.charLimit；
//抓住当前编辑器内容的长度
tinylen=ed.getContent（）.replace（/（]+）>）/ig，“”）.length；
//设置将显示在路径区域中的文本字符串
htmlcount=“HTML字符计数：”+tinylen+“/”+tinymax；
//如果用户已超过最大值，则将路径栏变成红色。
if（tinylen>tinymax）{
//在路径栏中放置文本字符串
if（$（'#max_char_string'）.size（））{
$（'#max#u char_string'）.html（''+htmlcount）；
}
否则{
$（“div#”+ed.id+“_path_row”）.append（“”+htmlcount+“”）
}
//防止插入键入的字符
e、 预防默认值（）；
e、 停止传播（）；
返回false；
} 

我也有同样的问题，发现这个链接非常有用：

虽然我稍微修改了一下，以便它从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
});

tinyMCE.init({
//选择权
设置：功能（ed）{
ed.onKeyUp.add（函数（ed，e）{
var tinylen，htmlcount，maxlength=$（“#”+tinyMCE.activeEditor.id）.attr（“maxlength”）；
if（最大长度）{
//抓住当前编辑器内容的长度
tinylen=ed.getContent（）.length；
htmlcount=“HTML字符计数：”+tinylen+“/”+maxlength；
if（tinylen>maxlength）{
htmlcount=“”+htmlcount+”；
}
//将html计数写入活动编辑器的路径行
tinymce.DOM.setHTML（tinymce.DOM.get（tinymce.activeEditor.id+“\u path\u row'），htmlcount）；
}
})；//ed.onKeyUp.add
}//设置
});

希望它能起作用：）

---

可能会有帮助：我以前没有使用tinymce，但redactor使用了textarea，所以我假设tinymce也使用了textarea。感谢您的回复，但是对textarea的正常限制对tinymce不起作用。可能与我运行您的解决方案时得到的“ed.onKeyUp未定义”重复错误。我如何修复它？谢谢！我使用的是4.0.4版。您需要确保这在

设置：函数（ed）

中查看更新的答案。John，非常感谢您的回复。我遵循了您提到的链接（）和函数（ed）确实是安装程序的属性值，这是一个选项。您正在使用tinyMCE 4.x吗？谢谢！嗨，John，我发现：。事件API似乎在tinyMCE 4中发生了更改。您介意发布另一个与tinyMCE 4兼容的回复吗？谢谢！

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