如何将VVVVEBJS集成至Django项目？

第一步：搞定静态资源 #

1. 拉取VVVVEBJS源码，把dist目录里的所有文件（css、js、fonts文件夹）复制到你的Django项目static/vvvvebjs/目录下
2. 在编辑页面的模板里引入必要的资源：

{% load static %}
<link rel="stylesheet" href="{% static 'vvvvebjs/css/vvvveb.css' %}">
<link rel="stylesheet" href="{% static 'vvvvebjs/css/font-awesome.min.css' %}">
<script src="{% static 'vvvvebjs/js/jquery.min.js' %}"></script>
<script src="{% static 'vvvvebjs/js/vvvveb.js' %}"></script>
<script src="{% static 'vvvvebjs/js/plugins.js' %}"></script>

第二步：模板里初始化编辑器 #

创建editor.html模板承载拖拽编辑器：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>拖拽建站编辑器</title>
    <!-- 上面的静态资源引入放在这里 -->
</head>
<body>
    <!-- 隐藏域存页面ID，编辑已有页面时用 -->
    <input type="hidden" id="page_id" value="{{ page.id|default:'' }}">
    <!-- 编辑器容器 -->
    <div id="content" class="content">
        <!-- 初始内容，编辑已有页面时从数据库加载 -->
        {{ page.content|default:''|safe }}
    </div>

    <script>
    $(document).ready(function() {
        // 初始化VVVVEB编辑器
        VVVVEB.init({
            container: '#content',
            // 加载需要的组件，按需选择
            components: [
                VVVVEB.Components.basic,
                VVVVEB.Components.forms,
                VVVVEB.Components.media
            ],
            // 绑定保存按钮的回调
            onSave: function(data) {
                var page_id = $('#page_id').val();
                // 调用后端接口保存内容
                $.post('{% url "save_page" %}', {
                    content: data.html,
                    page_id: page_id,
                    title: prompt('请输入页面标题：', '新建页面'),
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                }, function(response) {
                    if (response.success) {
                        alert('保存成功！');
                        // 如果是新建页面，跳转到编辑页（可选）
                        if (!page_id) {
                            window.location.href = '{% url "page_editor" page_id=0 %}'.replace('0', response.page_id);
                        }
                    } else {
                        alert('保存失败，请重试');
                    }
                });
            }
        });
    });
    </script>
</body>
</html>

第三步：数据库模型设计 #

在你的app的models.py里添加模型存储用户页面内容：

from django.db import models
from django.contrib.auth.models import User

class UserPage(models.Model):
    title = models.CharField(max_length=255, verbose_name='页面标题')
    content = models.TextField(verbose_name='页面内容')
    owner = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name='所属用户')
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

执行迁移命令：

python manage.py makemigrations
python manage.py migrate

第四步：写视图逻辑 #

编辑/新建页面视图 #

from django.shortcuts import render, get_object_or_404
from django.contrib.auth.decorators import login_required
from .models import UserPage

@login_required
def page_editor(request, page_id=None):
    page = None
    if page_id:
        # 只能编辑自己的页面
        page = get_object_or_404(UserPage, id=page_id, owner=request.user)
    return render(request, 'editor.html', {'page': page})

保存页面视图 #

from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.contrib.auth.decorators import login_required
from .models import UserPage

@require_POST
@login_required
def save_page(request):
    content = request.POST.get('content', '')
    page_id = request.POST.get('page_id')
    title = request.POST.get('title', '未命名页面')

    try:
        if page_id:
            # 更新已有页面
            page = UserPage.objects.get(id=page_id, owner=request.user)
            page.content = content
            page.title = title
            page.save()
        else:
            # 创建新页面
            page = UserPage.objects.create(
                title=title,
                content=content,
                owner=request.user
            )
        return JsonResponse({'success': True, 'page_id': page.id})
    except Exception as e:
        return JsonResponse({'success': False, 'error': str(e)})

第五步：配置URL路由 #

在项目的urls.py里添加：

from django.urls import path
from . import views

urlpatterns = [
    # 新建页面
    path('editor/', views.page_editor, name='new_page_editor'),
    # 编辑已有页面
    path('editor/<int:page_id>/', views.page_editor, name='page_editor'),
    # 保存页面接口
    path('save-page/', views.save_page, name='save_page'),
]

实用技巧与注意事项 #

• 内容安全：VVVVEB生成的HTML可能包含恶意脚本，建议用bleach库清理内容后再保存，比如在保存视图里：

  import bleach
  cleaned_content = bleach.clean(content, allowed_tags=bleach.ALLOWED_TAGS + ['div', 'section', 'article'], allowed_attributes=bleach.ALLOWED_ATTRIBUTES)
  

• 静态资源路径：如果编辑器里要引用项目的图片、CSS等，初始化时配置baseUrl: "{% static '' %}"，确保资源路径正确
• 自定义组件：可以自己扩展VVVVEB的组件，比如添加公司专属的模板片段，参考官方的组件开发文档
• 预览功能：可以在模板里加个预览按钮，把编辑器内容渲染到模态框里，不用保存就能看效果

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