6

我正在为我的所见即所得编辑器使用 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

您无法如此轻松地获取 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 :)

于 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），但它可能足够接近为您工作。计算 html 内容的长度是一种奇怪的情况，正如 Pekka 所说，<hr>标签的长度之类的东西可以解释。

于 2010-01-20T21:52:08.697 回答
5

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 标记的字符，忽略图像或水平线等其他元素，那么您可以使用 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/ ) 中获取内容，尽管它不是不会很容易。我会第二次@Pekka 对 HTML 的关注以及您将如何确定字符数。

于 2010-01-19T04:15:19.450 回答
0

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

//join_content是ckeditor的Id
//Editor 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; 
};
于 2013-11-27T09:22:35.940 回答
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 回答
0

它可以这样实现：

 <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>
于 2020-07-30T12:35:20.890 回答