الحد / عدد الأحرف في ckeditor w / jQuery

Question

أنا أستخدم CKEDitor لمحرر WYSIWYG الخاص بي وأحتاج إلى مراقبة وحد من عدد الأحرف كما هي الكتابة لدي برنامج نصي مسج يعمل بشكل جيد ل Textarea العادي

<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 أي أفكار؟

Answer 1

إذا كنت تستطيع الحصول على محتويات ckeditor لأن بعض الوظائف الأخرى تصف أن لدي فكرة عن كيفية الحصول على عدد الأحرف التي تم إدخالها. بمجرد أن يكون لديك المحتويات، قل

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

يمكنك تعيين ذلك إلى Innerhtml من Div مخفي، ثم احصل على عدد الأحرف في Instext من هذا DIV.

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> في المحتوى الخاص بك سيعود 0 لطول innertext)، ولكن قد يكون قريبا بما يكفي للعمل من أجلك. إنه نوع من الوضع الغريب عد طول محتوى HTML، كما قال بيككا أشياء مثل طول <hr> علامة مفتوحة للتفسير.

Answer 2

لا يمكنك الاستيلاء على محتوى ckeditor بسهولة، على سبيل المثال مع jQuery و $("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 :)

Answer 3

يعد Textarea عنصر سوى انخفاض، وعدم تحديثه مع المحتوى الذي تم إدخاله. يجب عليك الاستيلاء على محتويات مثيل CKEditor الخاص بك. هذا هو بالتأكيد ممكن.

تحقق من النهج في هذا السؤال. أن الوصول إلى محتويات CKEDitor في كل تغيير المحتوى.

أرى مشكلة أكبر بالنسبة لك، رغم ذلك. كم عدد الأحرف التي تحتوي عليها هذا الرمز؟:

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

(الجواب - أعتقد - اثني عشر)

أو هذا:

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

(الجواب - أعتقد - هو اثنين من المساحات)

أو هذا:

<hr>

(الجواب - أعتقد - هو واحد، ولكن هذا إلى الترجمة الفورية حقا)

هذه هي جميع السلاسل التي تحدث أثناء الكتابة وحذف النص في ckeditor.

على افتراض أنك تريد حساب جميع الشخصيات دون علامات HTML، تجاهل عناصر إضافية مثل الصور أو الخطوط الأفقية، هناك strip_tags () وظيفة لجافا سكريبت التي يمكنك استخدامها لتجريد البيانات.

Answer 4

يعرض CKEditor فعلا كإرام، يمكنك الحصول على المحتويات من iFrame (http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/)، على الرغم من أنها لن تكون سهلة. أود الثانية @ Pekka قلق بشأن HTML وكيف ستحدد عدد الأحرف.

Answer 5

// يمكنك الحصول على محتوى حقيقي من CKEDIT باستخدام Document.getbody (). Gettext () على النحو التالي: //
//عينة:

// join_content هو معرف ckeditor
// Editor HTML: {$ onejoininfo ['الوصف "]} {نموذج :: محرر (' join_content '،" كاملة "،"، "،"، "،"، 1)}

var join_contentVal = CKEDITOR.instances.join_content.document.getBody().getText();      
  if(strlen(join_contentVal) > 1000){                              
   return false;           
 }   



function save()
    {
    var caseText = CKEDITOR.instances.caseText.getData();  
    var caseforlen = CKEDITOR.instances.caseText.document.getBody().getText();
    if (strlen(caseforlen) > 4000) {
        alert("maxnum is 2000");
        return;
    }

}


function strlen(str) { 
    var regExp = new RegExp(" ","g");
    str = str.replace(regExp , ""); 
    str = str.replace(/\r\n/g,"");
    var realLength = 0, len = str.length, charCode = -1; 
    for (var i = 0; i < len; i++) { 
        charCode = str.charCodeAt(i); 
        if (charCode >= 0 && charCode <= 128) realLength += 1; 
        else realLength += 2; 
    } 
    return realLength; 
};  

Answer 6

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