I have a blog with posts. I also have a rich text editor (Quill).

Is it possible to check if the rich text editor has empty content?

I use Quill (with React, Express JS, MongoDB) and I want to somehow prevent storing the empty value in the database.

The problem is that if I add spaces into the editor the Quill will generate empty paragraphs. So no content only empty paragraphs. With the normal input field, I can check for the empty string but what if I have a rich text editor?

Problem:

<p>                     </p>

or even worse

<p>                            </p><p><br></p><p><br></p><p>       </p>

I don't really want to save this into the database. Because I don't want to have empty posts. How can I solve this issue? Can be the solution to somehow check for empty paragraph?.. but what about the <br> tag?

Please open this codesandbox and just enter bunch of spaces and click on the button. Open console and you'll see output of the editor.

codesandbox: /

Thank you very much

I have a blog with posts. I also have a rich text editor (Quill).

Is it possible to check if the rich text editor has empty content?

I use Quill (with React, Express JS, MongoDB) and I want to somehow prevent storing the empty value in the database.

The problem is that if I add spaces into the editor the Quill will generate empty paragraphs. So no content only empty paragraphs. With the normal input field, I can check for the empty string but what if I have a rich text editor?

Problem:

<p>                     </p>

or even worse

<p>                            </p><p><br></p><p><br></p><p>       </p>

I don't really want to save this into the database. Because I don't want to have empty posts. How can I solve this issue? Can be the solution to somehow check for empty paragraph?.. but what about the <br> tag?

Please open this codesandbox and just enter bunch of spaces and click on the button. Open console and you'll see output of the editor.

codesandbox: https://dxqhq.codesandbox.io/

Thank you very much

• javascript
• reactjs
• express
• rich-text-editor
• quill

• Why not use "innerText" in JavaScript? Virtually all browsers today support it. – FlatAssembler Commented Apr 15, 2020 at 11:09

4 Answers 4

as I understand you only want to save user input only if contains text so you have to clean the user input from HTML then check the output length

var regex = /(<([^>]+)>)/ig
body = "<p>test</p>"
hasText = !!body.replace(regex, "").length;
if(hasText) save()

You can check if a QuillJS delta object is empty or has whitespaces only by iterating through the object's ops property and checking the insert value of each operation. If all insert values are whitespace characters or the ops array is empty, then the delta object is considered empty or has whitespaces only.

Here is the function that checks if the delta object is empty or has whitespaces only:

isDeltaEmptyOrWhitespace(delta) {
    if (delta.ops.length === 0) {
        return true;
    }
    for (let i = 0; i < delta.ops.length; i++) {
        if (delta.ops[i].insert.trim() !== '') {
            return false;
        }
    }
    return true;
}

I hope this helps.

This worked for me so it wouldn't escape images.

function isQuillEmpty(value: string) {
   if (value.replace(/<(.|\n)*?>/g, '').trim().length === 0 && !value.includes("<img")) {
      return true;
    }
      return false;
    }

    const handleSubmit = () => {
    const isEditorEmpty = editorData?.replace(/<\/?[^>]+(>|$)/g, "").trim() === '';

    if (isEditorEmpty) {
        Alert.alert("Post", "Please add content and image or video for post")
        return
    }

    console.log("Editor data", editorData);
}