nicedit所见即所得编辑器+字符数

nicedit WYSIWYH editor + character count

本文关键字：字符 编辑器 所见即所得 nicedit      更新时间：2023-09-26

我在文本区域上使用nicedit来实现丰富的编辑器功能。我还想在文本区域的末尾添加字符计数器，以便用户在文本区域中键入特定数量的字符。我使用了上面的代码，编辑器工作得很好。

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

感谢

那么，您只需要知道文本区域中的字符数？

您可以通过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是一个程序员帮助网站。我们将帮助解决编码问题，但我们不仅仅是为人们编写程序（有很多网站可以这样做；）。

如果您想要一个NicEdit文本区域的动态字符计数器，那么您应该意识到NicEditor（以及大多数/所有所见即所得HTML编辑器）是一个可编辑的div，并且只有在div失去焦点后，div的内容才会添加到关联的文本区域。我发现，简单地尝试动态统计文本区域中的字符数是行不通的。也许我做错了什么。无论如何，我确实得到了一个动态的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列=100>`

  • 根据计数器的显示位置，将以下HTML代码放在文本区域代码的上方或下方。实际计数器值也被赋予了一个唯一的ID:

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

  • 在文本区域和计数器行之后，我添加了以下HTML代码块，以动态调用我的：

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

注意，我的字符计数器实际上是一个剩余字符计数器（有1000个字符的限制），因为我对在文本区域强制执行字符限制感兴趣（并让用户知道他们还可以添加多少字符），但它可以很容易地调整为实际使用的字符计数器。

我在FireFox 26和IE9中进行了测试。

也有这个问题，经过一番搜索，我找到了这个解决方案：

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

chars_text id可以是例如放置在nicedit附近的SPAN元素其他解决方案是基于.text（）.length，nicEdit使用html（），这带来了另一个问题-字符数也包括nicEdit插入的TAGS，所以你必须首先将它们剥离。

希望得到帮助。

相关文章：