Ограничение / количество символов в CKEditor w / Jquery

Я использую CKEditor для моего редактора wysiwyg, и мне нужно контролировать и ограничивать количество символов, когда они печатают, у меня есть скрипт jquery, который отлично работает для обычного 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 какие-либо идеи?

939   6  

6 ответов:

Если вы можете получить содержимое CKEditor, как описано в некоторых других сообщениях, у меня есть идея о том, как получить количество введенных символов. Если у вас есть содержание, скажем

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

Можно задать значение innerHTML скрытого div, а затем получить количество символов во внутреннем тексте этого 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 для длины внутреннего текста), но оно может быть достаточно близко, чтобы работать для вас. Это довольно странная ситуация, подсчитывающая длину содержимого html, поскольку Пекка сказал, что такие вещи, как длина тега <hr>, открыты для интерпретации.
5  
2010-01-20 23:52:08

Вы не можете так легко захватить содержимое 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 :)

7  
2010-01-19 23:58:22

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() функция для JavaScript, которую можно использовать для разденьте данные.

4  
2017-05-23 15:18:23

CKEditor фактически отображает как Iframe, вы можете получить содержимое из Iframe (http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/), хотя это будет нелегко. Я бы поддержал заботу @Pekka о HTML и о том, как вы собираетесь определить количество символов.

1  
2010-01-19 06:15:19

/ / Вы можете получить реальное содержание CKedit с помощью document.getBody ().getText () как показано ниже: //
// Пример:

//join_content-идентификатор ckeditor
// Редактор Html： {$oneJoinInfo ['description']} {form:: editor ('join_content', 'full',",",",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; 
};
0  
2013-11-27 11:22:35 
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);
0  
2014-08-26 14:04:41

Comments

    Ничего не найдено.
Click here to cancel reply.