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( '&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;
       

【讨论】:

【参考方案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 文本编辑器最大字符限制的主要内容,如果未能解决你的问题,请参考以下文章

tinymce富文本编辑器

tinyMCE富文本编辑器禁用

TinyMCE(富文本编辑器)

使用 TinyMCE 作为文本编辑器

TinyMCE 一款非常不错的富文本编辑器

用django-tinymce搞个富文本编辑器