React Quill 粘贴文本的字符限制

Question

我通过以下方式对

react-quill

中输入的字符进行了限制

  const handleChange = (text) => {
    const value = text.substring(0, maxLength);
    onChange(value);
  };

<ReactQuill
  value={value}
  onChange={(text) => handleChange(text)}
 />

问题是，如果我在粘贴文本后删除任何字符（通过按退格键），编辑器会在粘贴文本的末尾添加一些奇怪的符号（看起来像 HTML 实体的一部分）。

这是一个例子：

我粘贴了一条长绳子，它在应该的地方被切断了。字符串是

<p>A game known as "football" was played

这就是我删除一个字母后变成的样子（不一定是字符串中的最后一个字母）

<p>A game known as "football" was playe<

然后我再删除两个并得到

<p>A game known as "football" was pla&am

因此，字符并没有被删除，而是变成了 HTML 标签/实体。

我还尝试修改

handleChange

函数，以便它删除 HTML 标签和实体。

  const handleChange = (text, source) => {
    if (source === 'api') {
      return;
    }

    const value = text.replace(/<\/?[^>]+(>|$)/g, '').substring(0, maxLength);

    onChange(value);
  };

但是即使没有超出限制，它也不让我输入空格。

我的问题是如何避免这种情况，以及是否有更好的方法在

react-quill

中引入字符限制？

Answer 1

我建议你检查文本编码是如何在各处指定的（Web服务器、浏览器、内存对象中的js或打字稿）。

我花了很多时间调查这个“错误”，但就我而言，它是由网页中的文本编码差异引起的。删除三字节序列中的一个字符可能会生成与非拉丁字母表完全不同的字形。