javascript - tinyMCEの文字数制限

Question

私のプロジェクトに使用しています。すべて正常に動作していますが、テキストエリアtinyMCeに挿入される文字数を制限したいtinyMce

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",

まだ動作していません。よろしくお願いします。

score 9 · Accepted Answer

上記の回答は素晴らしかったです！textarea 要素自体に属性として追加することで max_chars を設定できるように、小さな修正を加えました。

setup : function(ed) {
        ed.onKeyDown.add(function(ed, evt) {
            //if ( $(ed.getBody()).text().length+1 > ed.getParam('max_chars')){
            if ( $(ed.getBody()).text().length+1 > $(tinyMCE.get(tinyMCE.activeEditor.id).getElement()).attr('max_chars')){
                evt.preventDefault();
                evt.stopPropagation();
                return false;
            }
        });
    }

score 4 · Accepted Answer

これは私のために働いた解決策です。

私は基本的に @needfulthing から提供されたコードを使用し、エラーを修正して改善しました。

function initTinymce(){

        tinymce.init({
            selector: '.richtext-editable',
            plugins: ['paste'],

            max_chars: 50000, // max. allowed chars

            setup: function (ed) {                              
                var allowedKeys = [8, 13, 16, 17, 18, 20, 33, 34, 35, 36, 37, 38, 39, 40, 46];
                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;                             
                if (len + args.content.length > editor.settings.max_chars) {
                    alert('Pasting this exceeds the maximum allowed number of ' + editor.settings.max_chars + ' characters for the input.');
                    args.content = '';
                }                                   
                tinymce_updateCharCounter(editor, len + args.content.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;
        }

}

score 2 · Accepted Answer

    // Returns text statistics for the specified editor by id
function getStats(id) {
    var body = tinymce.get(id).getBody(), text = tinymce.trim(body.innerText || body.textContent);

    return {
        chars: text.length,
        words: text.split(/[\w\u2019\'-]+/).length
    };
} 





function submitForm() {
        // Check if the user has entered less than 10 characters
        if (getStats('content').chars < 10) {
            alert("You need to enter 1000 characters or more.");
            return;
        }

        // Check if the user has entered less than 1 words
        if (getStats('content').words < 1) {
            alert("You need to enter 1 words or more.");
            return;
        }

        // Submit the form
        document.forms[0].submit();
    }

http://www.tinymce.com/wiki.php/How_to_limit_number_of_characters/words

それが役に立てば幸い

score 2 · Accepted Answer

tinyMCE は、文字を制限したり、ユーザーがより多くの文字を入力することを制限したりする方法を提供しません。唯一の方法は、明示的なプラグインまたはロジックを使用することです。以下のコードは、私が提起した問題を示しています。正しく動作しています。

これは、idと、文字数を表示するために使用されるsummaryもう 1 つのパラグラフ IDcharacter_countを持つ textarea で使用されます。ユーザーは制限を超える文字を入力できませんmax。この場合、バックスペースキーのみが機能します。キーが状態の場合、ASCII値を指定することで、任意のキーを自由に使用できます。

tinymce.init({
  selector: '#summary',  // change this value according to your HTML
  auto_focus: 'element1',
  statusbar: false,
  toolbar: 'undo redo | styleselect | bold italic underline | formatselect | aligncenter | fontselect',
  setup: function (ed) {
            ed.on('KeyDown', function (e) { 
                var max = 150;
                var count = CountCharacters();
                if (count >= max) {
                        if(e.keyCode != 8 && e.keyCode != 46)
                          tinymce.dom.Event.cancel(e);
                          document.getElementById("character_count").innerHTML = "Maximun allowed character is: 150";

                } else {
                    document.getElementById("character_count").innerHTML = "Characters: " + count;
                 }
            });

        }
 });

 function CountCharacters() {
    var body = tinymce.get("summary").getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};

score 2 · Accepted Answer

max_chars自分で実装する場合を除いて、tinymce 構成設定はありません。

tinyMCE.init({
   ...
   max_chars : "10",
   setup : function(ed) {
      ed.onKeyDown.add(function(ed, evt) {

        if ( $(ed.getBody()).text().length > ed.getParam('max_char')){
          e.preventDefault();
          e.stopPropagation();
          return false;
        } 

      });
   }
});

score 2 · Accepted Answer

解決策はうまくいきましたが、小さなバグがありました。文字数が正しくない場合は、

ed.on("KeyDown")

に変更します

ed.on("KeyUp")

、その後、正常に動作します。('Change') でテストしていません。それもうまくいくかもしれません！

score 1 · Accepted Answer

新しいtinyMCE4Xの変更でOKです。

    tinymce.init({
    charLimit : 10, // this is a default value which can get modified later
    setup: function(editor) {
        editor.on('change', function(e) {
            //define local variables
            var tinymax, tinylen, htmlcount;
            //setting our max character limit
            tinymax = this.settings.charLimit;
            //grabbing the length of the curent editors content
            tinylen = this.getContent().length;
            if (tinylen > tinymax) {
                alert('to big');
            }
        });
    }
    });

score 0 · Accepted Answer

TinyMCE + AngularJS

ng-maxlengthAngularJS のディレクティブを使用して、フロントエンドで最大文字数を制限する方法を次に示します。

パラメータ:ngMaxlength
型: 数値
詳細maxlength:値が maxlength よりも長い場合に検証エラーキーを設定します。

このディレクティブは、表示されるテキスト文字をカウントするだけでなく、<textarea>タグやスクリプトなどの HTML 内のすべてのテキストをカウントすることに注意してください。

まず、AngularJS、TinyMCE 4 配布、およびTinyMCE の AngularUI ラッパーを含めます。

HTML:

<form name="form" action="#">
    <textarea ng-model="myMCEContent" ui-tinymce ng-maxlength="200" name="body"></textarea>
    <span ng-show="form.body.$error.maxlength" class="error">Reached limit!/span>
</form>

JavaScript:

angular.module('myApp', ['ui.tinymce'])
.config(['$sceProvider', function($sceProvider) {
    // Disable Strict Contextual Escaping
    $sceProvider.enabled(false);
}])
.constant('uiTinymceConfig', {/*...*/})
.controller('myCtrl', ['$scope', function($scope) {
    // ...
}]);

jsFiddle

! 注意！

このソリューションを使用する前にマニュアルを読んで、AngularJS: $sce serviceで SCE を無効にした場合の結果を完全に理解してください。

score 0 · Accepted Answer

最も簡単な方法:

contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length; //takes lenght of current editor

if (contentContentLenght > 1499) {
                    e.preventDefault();
                    e.stopPropagation();
                    return false;
                } // 1500 is my limit in mine project.

ペーストを防ぐために：

editor.on('paste', function(e){
            contentContentLenght = tinyMCE.activeEditor.getContent({format : 'text'}).length;
            var data = e.clipboardData.getData('Text');
            if (data.length > (1500 - contentContentLenght)) {
                return false;
            } else {
                return true;
            }
        });

score -1 · Accepted Answer

Thariamaの答えはそれを実装しただけで素晴らしく、それはまさに私が探していたもので、いくつかの変更を加えただけです:

    max_chars : "10",
    setup : function(ed) {
        ed.onKeyDown.add(function(ed, evt) {
            if ( $(ed.getBody()).text().length+1 > ed.getParam('max_chars')){
                evt.preventDefault();
                evt.stopPropagation();
                return false;
            }
        });
    }

ありがとうタリアマ。

javascript - tinyMCEの文字数制限

16 に答える 16

TinyMCE + AngularJS

! 注意 ！

Related

Reference

! 注意！