Question

我正在使用CKEditor作为我的所见即所得编辑器，我需要监视和限制字符数，因为他们正在键入我有一个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替换为任何想法时，这似乎不起作用？

Answer 1

你无法轻易获取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 2

如果您可以像其他帖子所描述的那样获取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>将返回0表示innerText的长度），但它可能足够接近你的工作。计算html内容的长度是一种奇怪的情况，因为Pekka说<hr>标签的长度可以解释。

Answer 3

textarea只是一个后备元素，并未使用输入的内容进行实时更新。您必须获取CKEditor实例的内容。这绝对是可能的。

查看this question.中每次更改内容时访问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函数来删除数据。

Answer 4

CKEditor实际上呈现为Iframe，您可以从Iframe（http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/）获取内容，尽管这并不容易。我会想到@Pekka对HTML的关注以及你将如何确定字符数。

Answer 5

//您可以使用document.getBody（）。getText（）获取CKedit的真实内容，如下所示： //
//示例：

// join_content是ckeditor的Id //编辑器Html： {$ oneJoinInfo [ '描述']} {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; 
};

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

Answer 7

可以这样实现：

 <div class="form-group">
    <textarea name="ck" id="ck" class="form-control"></textarea>
 </div>
 <div> 
    Character type: <span id="count"></span>
 </div>

 <script type="text/javascript">
    $(document).ready(function()
    {
        var editor = CKEDITOR.replace('ck');
        editor.on("change", ck_change);

    });

    function ck_change()
    {
        var len = CKEDITOR.instances['ck'].getData();
        console.log(len);
        $("#count").text(len.length);
    }

  </script>

使用/ Jquery在CKEditor中限制/计数字符

7 个答案: