Quill Delta转HTML及表单提交验证问题求助（PHP&Smarty）

可能原因分析 #

这种情况大概率是两个环节出了问题：

• Delta转换时的字符串处理错误：你可能在传递Delta数据时，不小心把JSON字符串的首尾引号保留了下来（比如直接把JSON.stringify(delta)的结果未经解码就传给转换工具，或者转换后错误地给HTML包裹了双引号）。
• HTML渲染方式错误：输出内容时用了纯文本渲染（比如PHP里用htmlspecialchars转义，或者前端用innerText），导致HTML标签无法被解析，直接以文本形式显示。

解决方案 #

步骤1：正确处理Delta到HTML的转换

假设你是通过前后端配合处理：

• 前端提交Delta：把Quill的Delta对象转成JSON字符串存入隐藏域，不要额外添加引号：

// 获取Quill编辑器的Delta内容
const delta = quill.getContents();
// 存入隐藏表单域
document.getElementById('quill-delta').value = JSON.stringify(delta);

• 后端PHP转换：先解码JSON字符串为数组，再用Delta转HTML工具处理（比如kensnyder/quill-delta-to-html库），确保转换后的HTML没有多余引号：

// 接收并解码Delta数据
$deltaJson = $_POST['quill-delta'];
$delta = json_decode($deltaJson, true);

// 引入转换库（需先通过Composer安装）
require 'vendor/autoload.php';
use QuillDeltaToHtml\Converter;

// 转换Delta为HTML
$converter = new Converter($delta);
$htmlContent = $converter->convert();

// 这里绝对不要给$htmlContent手动添加双引号！

步骤2：正确渲染HTML内容

输出到页面时，直接输出转换后的HTML，不要转义：

// 错误示例（会把HTML转成纯文本）：
// echo htmlspecialchars($htmlContent);

// 正确示例：
echo $htmlContent;

如果是前端渲染，用innerHTML代替innerText：

// 错误：
// document.getElementById('content').innerText = htmlContent;

// 正确：
document.getElementById('content').innerHTML = htmlContent;

可能原因分析 #

核心问题是你对Quill空内容的判断逻辑有误：

• Quill编辑器即使没有输入任何内容，它的Delta对象也会是{"ops":[]}（或包含空文本的操作），直接判断empty($_POST['quill-delta'])会返回false，因为这是一个非空的JSON字符串。
• 另外可能存在的小问题：表单提交方式不匹配（比如表单用method="get"但PHP检查$_POST）、验证逻辑执行顺序错误（验证失败后没有终止后续保存代码）、提交按钮的name属性判断错误（比如PHP里判断isset($_POST['submit'])但按钮name是ok）。

解决方案 #

步骤1：正确判断Quill内容是否为空

需要解析Delta的ops数组，检查是否有实际的非空文本内容：

if (isset($_POST['ok'])) {
    $deltaJson = $_POST['quill-delta'];
    $delta = json_decode($deltaJson, true);
    
    // 标记是否有有效内容
    $hasValidContent = false;
    
    // 遍历Delta的操作数组
    if (!empty($delta['ops'])) {
        foreach ($delta['ops'] as $op) {
            // 检查是否有非空的文本插入操作
            if (isset($op['insert']) && trim($op['insert']) !== '') {
                $hasValidContent = true;
                break;
            }
        }
    }
    
    // 验证失败：显示错误提示并终止后续代码
    if (!$hasValidContent) {
        echo '<div class="alert alert-danger">请输入有效内容！</div>';
        exit; // 关键：阻止执行保存逻辑
    }
    
    // 验证通过：执行保存到数据库的逻辑
    // 示例：
    // $pdo->prepare("INSERT INTO contents (html) VALUES (?)")->execute([$htmlContent]);
    echo '<div class="alert alert-success">保存成功！</div>';
}

步骤2：检查表单基础设置

确保表单的method属性为post，且提交按钮的name与PHP判断一致：

<form method="post" action="your-save-script.php">
    <!-- Quill编辑器容器 -->
    <div id="editor"></div>
    <!-- 存储Delta的隐藏域 -->
    <input type="hidden" name="quill-delta" id="quill-delta">
    <!-- 提交按钮 -->
    <input type="submit" name="ok" value="Save" class="btn btn-primary">
</form>

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