如何检查富文本编辑器内容是否为空？

Question

我有一个有帖子的博客。 我还有一个富文本编辑器 ( Quill )。

是否可以检查富文本编辑器是否有空内容？

我使用 Quill（与 React、Express JS、MongoDB）并且我想以某种方式防止将空值存储在数据库中。

问题是，如果我在编辑器中添加空格， Quill将生成空段落。 所以没有内容只有空段落。 使用普通输入字段，我可以检查空字符串，但如果我有富文本编辑器怎么办？

问题：

<p>                     </p>

甚至更糟

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

我真的不想将其保存到数据库中。 因为我不想有空帖。 我该如何解决这个问题？ 可以以某种方式检查空段落的解决方案吗？..但是<br>标签呢？

请打开这个codesandbox，输入一堆空格，然后点击按钮。 打开控制台，你会看到编辑器的output。

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

非常感谢你

Answer 1

据我了解，您只想在包含文本时才保存用户输入，因此您必须从 HTML 清除用户输入，然后检查 output 长度

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

Answer 2

这对我有用，所以它不会逃避图像。

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

Answer 3

您可以通过遍历对象的ops属性并检查每个操作的insert值来检查QuillJS delta object是否为空或是否有空格。 如果所有insert值都是空白字符或ops数组为空，则增量 object 被认为是空的或只有空白。

这是 function 检查增量 object 是否为空或只有空格：

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;
}

我希望这有帮助。