1

我在tinyMCE我的一个项目中为 textareas 使用所见即所得的编辑器。我一直在寻找一种方法来限制用户输入的字符。

我的要求是：

  • 不要让用户输入超过指定的字符限制。（所以该方法应该绑定到 keyDown / keyUp 事件）。
  • 确保这也适用于复制/粘贴（即ctrl+v鼠标右键单击和paste）。
  • 在复制/粘贴时，行为应该是 --> 去除多余的字符innerText并将内容设置为去除的文本，但仍保留styles应用于原始内容的内容。

我已经查看了该maxchars插件，但它并没有达到目的，尤其是在copy / paste功能方面。我尝试实现自定义方法来实现上述要求。

我已经取得的成果如下：

达到字符限制后，阻止用户输入更多字符。

function preventExcessChars(editor, event) {
    var body = editor.getBody(),
        limit = editor.settings.charLimit,
        text = body.innerText || body.textContent,
        length = text.length;

    if (length >= limit && isCharacterKeyPress(event)) {
        event.preventDefault();
        event.stopImmediatePropagation();
        return false;
    }   
}

一旦绑定到keyDownorkeyUp事件，它就可以正常工作，并且一旦达到字符限制，就不允许用户再输入字符。问题在于它不支持copy / paste因此用户可以粘贴任意数量的字符。

照顾copy/ paste。

为了实现该功能，我认为使用'方法来更新内容copy /paste会很好。所以我将以上内容更新为：tinyMCEsetContent

function preventExcessChars(editor, event) {
    var body = editor.getBody(),
        limit = editor.settings.charLimit,
        text = body.innerText || body.textContent,
        length = text.length;

    if (length >= limit && isCharacterKeyPress(event)) {
        // update the content and use setContent to update the text area
        var new_content = text.substr(0, limit);
        editor.setContent(new_content);
        event.preventDefault();
        event.stopImmediatePropagation();
        return false;
    }   
}

这工作得很好。这样做的问题是它不会将原始内容的样式应用于新内容，因为新内容是innerText对象。

有没有办法可以从而innerHTML不是删除字符innerText并避免删除字符串中包含的任何 HTML 标记？

因此，例如说我有以下字符串：

 "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since morning.</p>";

innerText上述字符串的长度是55字符，并且说限制是50字符。我想5从上面的字符串中去掉最后一个字符，结果是：

 "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since mor</p>"

如果我使用上面的代码（即使用innerText）执行此操作，我得到的结果是This is a test. I have been testing this since mor. 如何获得包含 html 标签的上述结果？

4

1 回答 1

0

您可以使用此功能：

function maxChars(str, max) {
  var tags = 0,
      sQuotes = 0,
      dQuotes = 0,
      char,
      count = 0,
      result = [];
  for (var i = 0, len = str.length; i < len; ++i) {
    char = str.charAt(i);
    switch(char) {
      case '<':
        if (!sQuotes && !dQuotes) {
          ++tags;
          result.push(char);
          continue;
        }
        break;
      case '>':
        if (!sQuotes && !dQuotes) {
          --tags;
          result.push(char);
          continue;
        }
        break;
      case "'":
        if (tags && !dQuotes)
          sQuotes = !sQuotes;
        break;
      case '"':
        if (tags && !sQuotes)
          dQuotes = !dQuotes;
        break;
    }
    if (tags) {
      result.push(char);
    } else {
      if (++count < max)
        result.push(char);
    }
  }
  return result.join('');
};

// Example
var text = "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since morning.</p>";
maxChars(text, 50);
// "<p>This is a <b>test</b>.</p><p>I have been <i>testing</i> this since mor</p>"
于 2014-01-27T05:19:58.133 回答