reactjssuneditor

SunEditor In React - Validate Text Was Inputted?


Problem

I want to validate that a user has inputted actual text into the editor, ignoring html tags and whitespace.

Details

Here's an example of the content when a user doesn't type in anything:

   <p><br>
</p>

and another

<p>&nbsp;</p>

Attempted Solutions

I've tried putting a regex in the onChange event, but it's pretty clunky and probably won't take into account all the different ways non-textual content is represented; I need a better way.

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

Vague Ideas

I see that the SunEditor javascript api has a utility method, onlyZeroWidthSpace that returns a boolean; it may work, but I don't see how I can access it. I'm using Typescript, so maybe there's an issue there?

Thanks for your help!


Solution

  • Hi I am the author of the SunEditor React Component. Please the core SunEditor instance can be accessed by attaching a ref to the SunEditor component (You can review this from the documentation). Also to get plane text (non-html text), Please use the getText method on the editor object. Example below:

    editorRef.current.editor.getText()
    

    Notice that editorRef is the ref attached to the SunEditor Component.