如何让ContentTools通过标准POST表单而非AJAX保存内容？

嘿，我之前也跟你一样，喜欢ContentTools但被它默认的AJAX保存搞得头疼——毕竟项目里其他页面都是传统表单提交，突然跳个AJAX成功提示确实很突兀。不过完全可以改成标准POST表单提交的，我给你分享下具体的实现思路和步骤：

核心就是拦截ContentTools默认的AJAX保存事件，把编辑器输出的HTML内容同步到表单里的一个隐藏输入框，最后触发原生表单的POST提交，这样就能和你其他页面的提交体验完全统一了。

1. 给表单添加隐藏输入框 #

首先在你的表单里加一个隐藏字段，用来存储编辑器编辑后的HTML内容：

<form id="content-form" method="POST" action="/your-save-endpoint">
  <!-- 你的ContentTools编辑容器 -->
  <div class="editable" data-editable>
    <!-- 初始内容 -->
  </div>
  <!-- 隐藏输入框，用来承载编辑器的最终内容 -->
  <input type="hidden" name="editor_content" id="editor-content">
  <!-- 可以保留原来的表单提交按钮，或者用ContentTools自带的保存按钮 -->
  <button type="submit">保存内容</button>
</form>

2. 拦截并改写保存逻辑 #

ContentTools提供了saved事件来监听保存操作，我们可以在这里阻止默认的AJAX请求，转而完成内容同步和表单提交：

window.addEventListener('load', function() {
  // 初始化ContentTools编辑器
  var editorApp = ContentTools.EditorApp.get();
  editorApp.init('.editable', 'data-editable');

  // 监听保存事件
  editorApp.addEventListener('saved', function(event) {
    // 阻止默认的AJAX保存行为
    event.preventDefault();

    // 获取所有编辑区域的内容（这里假设只有一个编辑区域，多区域的话可以遍历处理）
    var editedRegions = event.detail().regions;
    for (var regionId in editedRegions) {
      if (editedRegions.hasOwnProperty(regionId)) {
        // 将编辑后的HTML写入隐藏输入框
        document.getElementById('editor-content').value = editedRegions[regionId];
      }
    }

    // 触发原生表单的POST提交
    document.getElementById('content-form').submit();
  });
});

3. 后端处理（无需额外改动） #

后端直接从POST参数editor_content中获取HTML内容，处理完成后跳转到你的成功提示页面即可——完全复用你现有页面的后端逻辑就行。

• 如果有多个编辑区域，可以给每个区域对应一个隐藏输入框，或者把所有区域的内容打包成JSON字符串存入一个隐藏框，后端再解析处理。
• 如果你习惯用ContentTools自带的顶部保存按钮，不用改按钮，上面的代码依然生效，因为我们拦截的是编辑器的saved事件，不管触发源是哪个按钮。
• 测试时注意检查HTML内容是否正确同步，避免特殊字符或标签被意外转义（ContentTools默认会保留正确的HTML结构，后端接收时注意不要二次转义）。

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