nicedit WYSIWYH編輯器+字符數

我在textarea上使用nicedit以允許豐富的編輯器功能。我還希望在textarea的末尾添加字符計數器，以便讓用戶在textarea中輸入特定數量的字符。我使用上面的代碼，編輯器效果很好。nicedit WYSIWYH編輯器+字符數

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script> 
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

感謝

來源

2012-03-08 heav3n

所以，你只需要知道字符在textarea中的數字？

你可以得到與textarea的價值的length屬性： textarea.value.length

下面是一個例子：

<textarea onkeyup="console.log(this.value.length)"></textarea>

這裏有一個字符計數檢查。這並非萬無一失，但它會幫助您瞭解：

<textarea onkeyup="updateCounter(this)" onpropertychange="this.onkeyup()"></textarea> 
<div id="limit"></div> 

<script> 

    var limit = document.getElementById("limit"); 

    function updateCounter(textarea) { 

     var len = textarea.value.length; 


     var max = 10; 


     if(max - len < 0) { 
      textarea.value = textarea.value.substring(0, max); 
     } else { 
      limit.innerHTML = max - len; 
     } 



    } 
</script>

另外請記住，Stack Overflow是一個程序員幫助網站。我們將幫助解決編碼問題，但我們不只是爲人們編寫程序（這裏有很多網站）。

來源

2012-03-08 15:14:01

是的，並打印在textarea下...任何還可以添加一個限制例如：剩餘300個字符... 299 ...等等作爲用戶類型。 – heav3n 2012-03-08 15:17:04

添加了一個可能的解決方案 – 2012-03-08 15:25:10

感謝您的回答和時間:) – heav3n 2012-03-08 16:28:33

如果你想要一個NicEdit textarea的動態字符計數器，那麼你應該認識到一個NicEditor（和大多數/所有所見即所得的HTML編輯器）是一個可編輯的div，並且div的內容只被添加到關聯的textarea在div放鬆焦點後。我發現只是試圖動態計算textarea中的字符無效。也許我做錯了什麼。在任何情況下，我沒有得到一個動態NicEdit字符計數器工作，具體如下：

設置在HTML頁面中使用NicEdit：

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script> 
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

增加提及其中包含的JavaScript文件計數器功能：

<script type="text/javascript" language="JavaScript" src="nicCount.js"></script>

nicCount.js的內容是：

function nicCount(editor, ctrId, maxChars) { 
    // Count characters remaining in the given nicEditor (editor), and update the given counter (ctrId) 
    counterObj = document.getElementById(ctrId); 
    if(counterObj) { 
     var content = editor.getContent(); 
     if(maxChars - content.length <= 0) { 
      // if there are no characters remaining, display the negative count in red 
     counterObj.innerHTML = "<font color='red'>"+ (maxChars - content.length) + "</font>"; 
     } 
     else { // characters remaining 
     counterObj.innerHTML = maxChars - content.length; 
     } 
    } 
}

定義一個文本，確保它有一個唯一的ID：

<textarea name='mytextarea1' id='mytextarea1行= 10周的cols = 100>`
根據你希望出現在櫃檯，把下面的HTML代碼高於或低於textarea代碼。實際計數器值也被賦予一個唯一的ID：

<p><b id='mycounter1'>1000</b> characters remaining</p>

textarea的和反行後，我添加了以下HTML代碼塊，動態調用我：

<script type="text/javascript"> 
//<[!CDATA[ 
bkLib.onDomLoaded (function() { 
    var editor = nicEditors.findEditor('mytextarea1'); 
    editor.getElm().onkeyup = function() { nicCount(editor, 'mycounter1', 1000); } 
}) 
//]] 
</script>

請注意，我的char計數器實際上是一個chars-remaining計數器（具有1000個字符的限制），因爲我有興趣在textarea上強制實施字符限制（並讓用戶知道它們還可以添加多少個字符），但它可以很容易地進行調整成爲一個實際使用字符的計數器。

我在FireFox 26和IE9中測試了這個。

來源

2014-01-14 16:38:06 cbspencer

有這個問題太，一些搜索後，我來到了這個解決方案：

$('body').on('keyup keydown focus','.nicEdit-selected', function (event) { $('#chars_text').text($(this).html().replace(/<\/?[^>]+(>|$)/g, "").length)});

chars_text ID可以是如。 SPAN元素放置在niceit附近的任何地方其他解決方案基於.text（）.length，nicEdit使用html（），這帶來了另一個問題 - 字符數也包括由nicEdit插入的標籤，因此您必須首先將它們去除。

希望得到這個幫助。

來源

2017-04-30 10:25:56

nicedit WYSIWYH編輯器+字符數

回答

相關問題