react-draft-wysiwyg 如何在超出最大长度限制时禁止拖入外部文本

你选择监听handleDrop事件的思路是正确的，无法从SelectionState中获取文本属于正常情况，该对象仅存储选区位置、偏移量等定位信息，本身不存储编辑器内容，你可以按以下逻辑实现需求：

• 首先提前声明编辑器允许的最大内容长度常量，示例：

  const MAX_ALLOWED_LENGTH = 2000
  

• 在handleDrop回调中按顺序执行以下判断：
  1. 先通过第三个参数isInternal判断是否为外部拖入内容，值为false即为外部拖入
  2. 从dataTransfer对象中提取拖入的纯文本内容：

     const droppedContent = dataTransfer.getData('text/plain')
     

  3. 从当前编辑器实例的editorState中获取已有内容的总长度，不需要通过SelectionState获取：

     // 以Draft.js为例，其他编辑器可调用对应获取全文本的API
     const currentText = editorState.getCurrentContent().getPlainText('')
     const currentTotalLength = currentText.length
     

  4. 计算两者长度之和，超出限制时直接返回true即可终止默认插入行为：

     if (currentTotalLength + droppedContent.length > MAX_ALLOWED_LENGTH) {
       // 返回true表示当前事件已被自定义逻辑接管，编辑器不会执行默认的拖入插入操作
       return true
     }
     // 未超出限制时返回false，走编辑器默认拖入逻辑
     return false
     

补充注意：如果拖入内容包含富文本格式，可根据需要先将拖入内容转为实际插入后的纯文本计算长度，避免格式标签占位导致长度计算偏差。

内容的提问来源于stack exchange，提问作者Priyanka Lad