已安装django-summernote，如何实现输入时触发保存帖子的事件？

Django本身没有直接提供前端输入时触发保存的内置能力，但可以通过django-summernote的前端事件结合Django后端API实现这个需求，核心思路是监听编辑器的输入事件，通过AJAX把内容异步提交给后端保存。

实现步骤： #

1. 监听summernote的输入事件
   在页面JS代码里，绑定summernote的onChange或onKeyup事件，用户输入时触发AJAX请求：

   $(document).ready(function() {
       $('#summernote').summernote({
           height: 300,
           onChange: function(contents, $editable) {
               saveDraft(contents);
           }
       });
   });
   
   function saveDraft(content) {
       // 防抖处理：避免频繁请求后端（可选）
       clearTimeout(window.saveTimer);
       window.saveTimer = setTimeout(() => {
           $.ajax({
               url: '/save-post-draft/',
               type: 'POST',
               data: {
                   'content': content,
                   'post_id': $('#post-id').val(),
                   'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
               },
               success: () => console.log('草稿已保存'),
               error: () => console.error('保存失败')
           });
       }, 300);
   }
   

2. 后端编写保存视图
   在Django的views.py中实现处理保存的逻辑：

   from django.http import JsonResponse
   from .models import Post
   
   def save_post_draft(request):
       if request.method != 'POST':
           return JsonResponse({'status': 'error', 'msg': '无效请求'}, status=400)
       
       post_id = request.POST.get('post_id')
       content = request.POST.get('content')
       try:
           post = Post.objects.get(id=post_id)
           post.content = content
           post.save()
           return JsonResponse({'status': 'success'})
       except Post.DoesNotExist:
           return JsonResponse({'status': 'error', 'msg': '帖子不存在'}, status=404)
   

3. 配置URL路由
   在urls.py中添加对应路由：

   from django.urls import path
   from . import views
   
   urlpatterns = [
       # 其他路由...
       path('save-post-draft/', views.save_post_draft, name='save_post_draft'),
   ]
   

关键注意点： #

• 必须携带csrfmiddlewaretoken参数，否则后端会拦截请求。
• 防抖处理可根据需求调整延迟时间，减少后端请求压力。
• 若为新建帖子，需先创建空帖子实例并将ID传递给前端，用于后续保存。

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