reactjs - SunEditor In React - 验证输入的文本？

Question

问题

我想验证用户是否已将实际文本输入到编辑器中，而忽略了 html 标签和空格。

细节

• 我正在使用 ReactJS SunEditor 组件
• 我正在使用打字稿

以下是用户未输入任何内容时的内容示例：

   <p><br>
</p>

和另一个

<p>&nbsp;</p>

尝试的解决方案

我已经尝试在onChange事件中放置一个正则表达式，但它非常笨拙，可能不会考虑非文本内容的所有不同表示方式；我需要一个更好的方法。

const regex = /(<([^>]+)>)/ig;

模糊的想法

我看到 SunEditor javascript api 有一个实用方法，onlyZeroWidthSpace它返回一个布尔值；它可能有效，但我不知道如何访问它。我正在使用 Typescript，所以那里可能有问题？

谢谢你的帮助！

Answer 1

嗨，我是 SunEditor React 组件的作者。请通过将 ref 附加到 SunEditor 组件来访问核心 SunEditor 实例（您可以从文档中查看此内容）。还要获取平面文本（非 html 文本），请在编辑器对象上使用 getText 方法。下面的例子：

editorRef.current.editor.getText()

请注意，editorRef 是附加到 SunEditor 组件的 ref。

Answer 2

这是一种似乎可行的时髦方法。任何其他建议都非常欢迎和邀请。

 <SunEditor
 ...
 onChange={content => {

            const contentTestContainer = document.createElement('div');
            contentTestContainer.innerHTML = content;
            const textContent = contentTestContainer.textContent;
            
            if (textContent) {
                props.getFieldHelpers('description').setValue(content);
            }
        }}
  />

Answer 3

所有事件处理程序都是绑定的核心对象。 改变

editor.onChange = (contents, core) => {
   // You can use the util object
   core.util.onlyZeroWidthSpace();
}