toast-ui/editor表单提交异常：无法将Markdown内容传入隐藏字段

以下是几个排查和解决的关键点：

1. 修正HTML结构问题 #

你的编辑器容器标签闭合错误，这可能导致编辑器渲染异常：

<!-- 错误写法 -->
<div id="editor"><div>

<!-- 正确写法 -->
<div id="editor"></div>

同时要确保隐藏字段在<form>标签内部，否则表单提交时不会携带这个字段：

<form>
  <div id="editor"></div>
  <input type="hidden" name="content" id="content">
  <button type="submit">提交</button>
</form>

2. 确保编辑器实例的作用域可访问 #

如果editor变量是在局部作用域（比如$(document).ready()的回调里）声明的，提交事件的回调会无法访问到它。可以把editor声明为全局变量，或者确保在同一个作用域内：

// 声明为全局变量，确保提交事件能访问
let editor;

$(document).ready(function() {
  editor = new Editor({
    el: document.querySelector('#editor'),
    height: '600px',
    initialEditType: 'markdown',
    placeholder: 'Placeholder',
  });
});

3. 调整表单提交逻辑 #

表单默认提交流程可能在赋值完成前就触发了，改成先阻止默认行为，赋值后再手动提交：

$(document).on("submit", "form", function(event) {
  // 阻止默认提交
  event.preventDefault();

  // 调试用：检查编辑器实例和内容是否正常
  console.log(editor);
  console.log(editor?.getMarkdown());

  if (editor) {
    document.querySelector('#content').value = editor.getMarkdown();
  }

  $(window).off('beforeunload');

  // 手动提交表单
  this.submit();
});

额外排查点 #

• 检查浏览器控制台是否有报错（比如editor is not defined），快速定位作用域问题
• 确保jQuery和Toast UI Editor的脚本加载顺序正确，jQuery要在你的app.js之前加载

内容的提问来源于stack exchange，提问作者Tyson of the Northwest