限制/ count個字符中的CKEditor瓦特/ jQuery的

Question

我使用的CKEditor爲我的WYSIWYG編輯器，我需要監視和限制，因爲它們是打字我有一個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取代任何想法？

Answer 1

如果你能得到的CKEditor的內容，其他一些帖子描述我有一個關於如何獲得輸入字符數的想法。一旦你的內容，說

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

你可以設置一個隱藏的div的innerHTML，然後得到的字符個數在該分區的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的內容的長度，因爲佩卡說，像標籤的長度這樣的東西是可以解釋的。

Answer 2

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標籤的所有字符，忽略其他元素（如圖像或水平線），可以使用JavaScript的strip_tags()函數去除數據。

Answer 3

CKEditor實際上呈現爲Iframe，您可以從Iframe（http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/）中獲取內容，但這不容易。我會再次@Peka對HTML的擔心以及你如何確定字符數。

Answer 4

你不能很容易抓住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 5

//您可以通過使用document.getBody（）得到CKedit的實際內容的getText（）如下： //
//樣品：

// join_content是CKEditor的的標識
//編輯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);