6

wysiwyg エディターに CKEditor を使用しており、入力中の文字数を監視して制限する必要があります。通常の TextArea で正常に動作する jquery スクリプトがあります。

<script type ="text/javascript" language="javascript">
    function limitChars(textid, limit, infodiv) {
        var text = $('.' + textid).val();
        var textlength = text.length;
        if (textlength > limit) {
            $('#' + infodiv).html('You cannot write more then ' + limit + ' characters!');
            $('#' + textid).val(text.substr(0, limit));
            return false;
        }
        else {
            $('#' + infodiv).html('You have ' + (limit - textlength) + ' characters left.');
            return true;
        }
    }

    $(function() {

        $('.comment-1').keyup(function() {
            limitChars('comment-1', 1000, 'charlimitinfo-1');
        })
    });

</script>

ただし、textArea が CKEditor に置き換えられた場合、これはうまくいかないようです。

4

7 に答える 7

9

たとえばjqueryを使用すると、ckeditorのコンテンツを簡単に取得できず$("iframe").contents()...、コードが起動したときにckeditorの準備ができていません。そのため、エディターのインスタンスの準備ができたら、いくつかの関数をイベントにバインドする必要があります。その後、タグを取り除き、最初と最後から空白を削除すると、カウントを開始できます:)

    <input type="text" name="count" id="count" />
    <textarea id="ck"></textarea>
    <script type="text/javascript">
    $(document).ready(function()
    {
        var editor = CKEDITOR.replace('ck');
        editor.on("instanceReady", function(){
            this.document.on("keyup", ck_jq);
            this.document.on("paste", ck_jq);
        });

    });

    function ck_jq()
    {
        var len = CKEDITOR.instances['ck'].getData().replace(/<("[^"]*"|'[^']*'|[^'">])*>/gi, '').replace(/^\s+|\s+$/g, '');
        $("#count").val(len.length);
    }

    </script>

HTH :)

于 2010-01-19T21:58:22.390 に答える
7

他の投稿で説明されているように CKEditor の内容を取得できる場合、入力された文字数を取得する方法についてアイデアがあります。内容を確認したら、次のように言います。

<b><span class="redText">H</span>ello <span>World!</span></b>

これを非表示の div の innerHTML に設定し、その div の innerText の文字数を取得できます。

var elem = document.getElementById('hiddenTestDiv');
elem.innerHTML = '<b><span class="redText">H</span>ello <span>World!</span></b>';
var innerText = elem.innerText;  // equals 'Hello World!'
var contentLength = elem.innerText.length; // equals 12

それは完璧な解決策ではないと思います (たとえば<hr>、あなたのコンテンツでは、innerText の長さに対して 0 が返されます) が、十分に機能する可能性があります。<hr>Pekkaがタグの長さのようなものは解釈の余地があると言ったように、HTML のコンテンツの長さを数えるのは一種の奇妙な状況です。

于 2010-01-20T21:52:08.697 に答える
5

テキストエリアは単なるフォールバック要素であり、入力されたコンテンツでライブで更新されることはありません。CKEditor インスタンスの内容を取得する必要があります。これは間違いなく可能です。

この質問のアプローチを確認してください。コンテンツが変更されるたびに CKEditor のコンテンツにアクセスします。

しかし、あなたにはもっと大きな問題があります。このコードには何文字ありますか?:

<b><span class="redText">H</span>ello <span>World!</span></b>

(答えは - 私が思うに - 12 です)

またはこれ：

<b>  <p style="font-size: 30px; font-weight: bold"></p>  </b>

(答えは - 私が思うに - 2 つのスペースです)

またはこれ：

<hr>

（答えは-私が思う-1つですが、それは実際には解釈次第です）

これらはすべて、CKEditor でテキストを書き込んだり削除したりするときに発生すると考えられる文字列です。

画像や水平線などの追加要素を無視して、HTML タグのないすべての文字を数えたいと仮定すると、データを削除するために使用できる JavaScript 用のstrip_tags()関数があります。

于 2010-01-06T16:29:08.017 に答える
1

CKEditor は実際には Iframe としてレンダリングします。Iframe からコンテンツを取得できます ( http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/ )。簡単にはいきません。HTMLに関する@Pekkaの懸念と、文字数をどのように決定するかについて2番目に挙げます。

于 2010-01-19T04:15:19.450 に答える
0 
function getCurrentCount(editor){
               var currentLength = editor.getData()
                               .replace(/<[^>]*>/g, '')
                               .replace(/\s+/g, ' ')
                               .replace(/&\w+;/g ,'X')
                               .replace(/^\s*/g, '')
                               .replace(/\s*$/g, '')
                               .length;

               return currentLength;
}

function checkLength(evt){
               var stopHandler = false;
               var currentLength = getCurrentCount(evt.editor);
               var maximumLength = 350;

               if(evt.editor.config.MaxLength)
               {
                               maximumLength = evt.editor.config.MaxLength;
               }

               if(!evt.editor.config.LockedInitialized)
               {
                               evt.editor.config.LockedInitialized = 1;
                               evt.editor.config.Locked = 0;
               }

               if(evt.data)
               {
                               if(evt.data.html)
                               {
                                               currentLength += evt.data.html.length;
                               }
                               else if(evt.data.text)
                               {
                                               currentLength += evt.data.text.length;
                               }
               }

               if(!stopHandler && currentLength >= maximumLength)
               {
                               if ( !evt.editor.config.Locked )
                               {
                                               // Record the last legal content.
                                               evt.editor.fire( 'saveSnapshot' );
                                               evt.editor.config.Locked = 1;
                                               // Cancel the keystroke.
                                               evt.cancel();
                               }
                               else
                                               // Check after this key has effected.
                                               setTimeout( function()
                                               {
                                                              // Rollback the illegal one.
                                                              if( getCurrentCount(evt.editor) > maximumLength )
                                                                              evt.editor.execCommand( 'undo' );
                                                              else
                                                                              evt.editor.config.Locked = 0;
                                               }, 0);
               }
}

CKEDITOR.replace('local',{
                MaxLength: 255
});
CKEDITOR.instances.local.on('key', checkLength);
CKEDITOR.instances.local.on('paste', checkLength);
于 2014-08-26T11:04:41.750 に答える