Django实现contenteditable div与后端HTML文本对比并返回结果

核心逻辑 #

不用无刷新方案的话，流程很直接：

1. 后端存储一份基准HTML文本
2. 前端用contenteditable="true"的黑色div让用户编辑，提交时通过表单将div的HTML内容传给后端
3. 后端把提交内容和基准内容做字符串对比，返回结果到页面的灰色区域

完整代码实现 #

1. 模型定义（models.py）

先创建模型存储基准HTML文本：

from django.db import models

class HtmlBenchmark(models.Model):
    # 存储基准HTML文本，TextField足够支持长内容存储
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return "基准HTML文本"

先通过后台管理添加一条基准数据，方便测试使用。

2. 视图处理（views.py）

这是核心对比逻辑的实现，解决你卡住的部分：

from django.shortcuts import render, get_object_or_404
from .models import HtmlBenchmark

def html_compare(request):
    # 获取第一条基准数据（可根据需求指定特定数据）
    benchmark = get_object_or_404(HtmlBenchmark, pk=1)
    result = None

    if request.method == 'POST':
        # 接收前端提交的用户编辑HTML内容
        user_html = request.POST.get('user_html', '')
        # 对比逻辑：strip()去除首尾空白，如需严格对比可去掉此方法
        if user_html.strip() == benchmark.content.strip():
            result = "CORRECT: 两段文本一致"
        else:
            result = "ERROR: 两段文本不同"

    context = {
        'benchmark_content': benchmark.content,
        'result': result
    }
    return render(request, 'html_compare.html', context)

3. 模板文件（templates/html_compare.html）

注意要把contenteditable div的内容同步到表单隐藏字段，否则无法提交：

<!DOCTYPE html>
<html>
<head>
    <title>HTML文本对比</title>
    <style>
        .editable-div {
            width: 100%;
            min-height: 200px;
            background-color: #000;
            color: #fff;
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
        }
        .result-area {
            width: 100%;
            min-height: 80px;
            background-color: #eee;
            padding: 15px;
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h1>HTML文本对比</h1>
    <form method="POST">
        {% csrf_token %}
        <!-- 隐藏字段，用于提交div的HTML内容 -->
        <input type="hidden" name="user_html" id="user_html">
        <!-- 可编辑黑色div -->
        <div class="editable-div" contenteditable="true" id="edit-div">
            {{ benchmark_content|safe }}
        </div>
        <button type="submit" onclick="syncContent()">提交对比</button>
    </form>
    <!-- 结果显示区域 -->
    <div class="result-area">
        {% if result %}
            {{ result }}
        {% else %}
            请编辑上方文本后点击提交按钮
        {% endif %}
    </div>

    <script>
        // 提交前将div内容同步到隐藏字段
        function syncContent() {
            const editDiv = document.getElementById('edit-div');
            const hiddenInput = document.getElementById('user_html');
            hiddenInput.value = editDiv.innerHTML;
        }
    </script>
</body>
</html>

4. URL配置（urls.py）

添加对应的URL映射：

from django.urls import path
from . import views

urlpatterns = [
    path('html-compare/', views.html_compare, name='html_compare'),
]

未来扩展：支持部分代码对比 #

如果需要显示具体差异位置，可以用Python自带的difflib库生成高亮对比：
修改views.py的对比逻辑：

import difflib
from django.utils.safestring import mark_safe

def html_compare(request):
    benchmark = get_object_or_404(HtmlBenchmark, pk=1)
    result = None
    diff_html = None

    if request.method == 'POST':
        user_html = request.POST.get('user_html', '')
        if user_html.strip() == benchmark.content.strip():
            result = "CORRECT: 两段文本一致"
        else:
            result = "ERROR: 两段文本不同"
            # 生成带高亮的差异HTML
            d = difflib.HtmlDiff()
            benchmark_lines = benchmark.content.splitlines()
            user_lines = user_html.splitlines()
            diff_html = mark_safe(d.make_file(benchmark_lines, user_lines, "基准文本", "你的文本"))

    context = {
        'benchmark_content': benchmark.content,
        'result': result,
        'diff_html': diff_html
    }
    return render(request, 'html_compare.html', context)

然后在模板的结果区域追加：

{% if diff_html %}
    <h3>差异对比：</h3>
    {{ diff_html }}
{% endif %}

就能看到带颜色高亮的差异部分了。

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