React 中的 SunEditor - 验证输入的文本？

Question

问题

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

详情

我正在使用 ReactJS SunEditor 组件
我正在使用 Typescript

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

   <p><br>
</p>

还有一个

<p>&nbsp;</p>

尝试的解决方案

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

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

模糊的想法

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

感谢您的帮助！

Answer 1

这是一种看起来很有效的时髦方法。欢迎并邀请任何其他建议。

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

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

Answer 2

所有事件处理程序都绑定了核心对象。 onChange

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

Answer 3

大家好，我是 SunEditor React 组件的作者。请通过将 ref 附加到 SunEditor 组件来访问核心 SunEditor 实例（您可以从 documentation 中查看）。同样要获取平面文本（非 html 文本），请在编辑器对象上使用 getText 方法。示例如下：

editorRef.current.editor.getText()

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

Answer 4

你可以试试这个：

onBlur = {(e) => console.log(e.target.innerText)}

React 中的 SunEditor - 验证输入的文本？

SunEditor In React - Validate Text Was Inputted?

reactjs

suneditor

问题

详情

尝试的解决方案

模糊的想法