Vaadin 14中如何正确判断富文本编辑器内容是否为空？

问题分析 #

• 编辑器原生isEmpty()方法存在局限性：仅未点击任何格式按钮时判断有效；若仅点击格式按钮（如H1）但未输入内容，getValue()会返回类似[{"attributes":{"header":1},"insert":"\n"}]的Delta格式JSON，导致isEmpty()误判为非空。
• 现有基于getHtmlValue()去除HTML标签的判断方法无法检测图片：插入图片后getHtmlValue()始终返回空字符串，无法识别图片内容。

解决方案 #

直接解析getValue()返回的Delta格式JSON，判断是否存在有效文本或图片：

代码实现（以Gson为例） #

import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
import com.google.gson.JsonParser;

private boolean isRichTextEditorEmpty(String editorValue) {
    // 预处理空输入情况
    if (editorValue == null || editorValue.strip().isEmpty()) {
        return true;
    }

    JsonArray deltaArray = JsonParser.parseString(editorValue).getAsJsonArray();
    boolean hasValidContent = false;

    for (JsonElement element : deltaArray) {
        JsonObject deltaObj = element.getAsJsonObject();
        JsonElement insertElem = deltaObj.get("insert");

        if (insertElem.isJsonPrimitive()) {
            // 检查文本内容：排除纯空白字符
            String text = insertElem.getAsString();
            if (!text.strip().isEmpty()) {
                hasValidContent = true;
                break;
            }
        } else if (insertElem.isJsonObject()) {
            // 检查图片（根据编辑器实际Delta结构调整字段名）
            JsonObject insertObj = insertElem.getAsJsonObject();
            if (insertObj.has("image")) {
                hasValidContent = true;
                break;
            }
            // 可扩展判断其他媒体类型，如video、audio等
        }
    }

    return !hasValidContent;
}

逻辑说明 #

1. 空值预处理：先判断编辑器返回值是否为null或纯空白字符串，直接返回空状态。
2. Delta解析：将getValue()返回的JSON数组解析为可遍历的结构。
3. 内容校验：
   • 若insert字段是字符串，判断是否包含非空白文本；
   • 若insert字段是对象，检查是否包含图片（或其他媒体）字段，存在则视为有有效内容。
4. 结果返回：遍历结束后，若未找到任何有效内容则返回true，否则返回false。

适配说明 #

不同富文本编辑器的Delta格式可能存在差异，比如图片的存储字段可能不是image，需要对照编辑器官方文档调整判断逻辑。

内容的提问来源于stack exchange，提问作者Lukas