限制tinyMCE中的字符数 [英] Limit the number of character in tinyMCE

问题描述

我使用 tinyMCe 为我的项目。一切正常但现在我想限制将插入 tinyMce <的字符数/ code> textarea

Im using tinyMCe for my project.Everything is working fine but now i want to restrict the number of character that will be insert into 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",

但仍然无法正常工作。谢谢。

but still not working.Thanks in advance.

推荐答案

这适用于tinyMCE 4.3.12并且还可以捕获粘贴：

This works in tinyMCE 4.3.12 and also captures pasting:

编辑：修复了在编辑器下显示字符计数器的错误和扩展代码。可能不是最好的方法，因为它依赖于当前具有隐藏文本区域之前的编辑器div的tinyMCE的HTML结构。

Fixed bugs and extended code to display a character counter under the editor. Possibly not the best way as it relies a bit on the current HTML structure of tinyMCE having the editor div before the hidden textarea.

此版本仅计算文本长度并忽略HTML标签长度。要计算完整的HTML长度，请将所有innerText替换为innerHTML。

This version only counts the text length and ignores HTML tag length. To count full HTML length, replace all "innerText" with "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的粘贴事件？

这篇关于限制tinyMCE中的字符数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！