Django主站TinyMCE编辑器提交按钮失效问题求助

1. TinyMCE初始化时机与表单提交的冲突 #

主站页面首次加载时，若TinyMCE还未完成初始化，表单提交事件就已绑定，会导致第一次提交时编辑器未就绪，触发异常。刷新后编辑器已缓存初始化，所以功能恢复正常。

检查tiny.js的初始化逻辑：

• 确认是否用DOMContentLoaded或window.onload确保DOM加载完成后再初始化编辑器；
• 可通过setup回调绑定编辑器就绪事件，确保提交逻辑只在编辑器初始化完成后生效：

tinymce.init({
  selector: '#id_content',
  setup: function(editor) {
    editor.on('init', function() {
      // 在此绑定表单提交事件
    });
  }
});

2. 表单提交时未同步编辑器内容到textarea #

TinyMCE默认会在表单提交时自动同步内容，但如果主站用自定义addEventListener绑定提交事件，可能在内容同步前就触发了提交，导致textarea为空，后端验证拦截，页面无跳转（看起来像按钮无响应）。

解决方法：在自定义提交事件中手动触发内容同步：

document.querySelector('#blog-form').addEventListener('submit', function(e) {
  // 先同步编辑器内容到原生textarea
  tinymce.triggerSave();
  // 再执行后续提交逻辑
});

3. 模板中JS加载顺序错误 #

检查createBlog.html的JS加载顺序：

• 若表单提交JS比TinyMCE初始化JS（tiny.js）先加载，首次页面加载时提交逻辑绑定编辑器还未初始化，导致报错；刷新后浏览器缓存TinyMCE JS，加载顺序提前，功能恢复。
• 正确顺序：先加载TinyMCE核心JS，再加载tiny.js初始化代码，最后加载表单提交相关JS。

4. 前端请求与后端验证排查 #

打开浏览器F12控制台，第一次点击提交时：

• 查看Network标签：若未发送POST请求，说明前端JS阻止了提交；若发送请求但返回200未跳转，大概率是表单验证失败（比如content字段为空，因编辑器未同步）。
• 查看Console标签：若有TinyMCE相关报错，说明初始化过程存在异常。

5. 视图层验证逻辑排查 #

检查PostCreateView的form_valid或字段验证逻辑：

• 若content字段为必填项，第一次提交时textarea为空（编辑器未同步），会触发表单验证失败，若模板未显示错误提示，就会表现为按钮无响应。

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