如何获取CodeMirror 6编辑器的文本值用于表单提交

CodeMirror 6 与旧版5的API差异极大，网上大部分旧版教程提到的getValue()等方法已经完全废弃，以下是适配最新版本的可落地方案：

核心取值API：对已经初始化完成的编辑器实例，调用editor.state.doc.toString()即可获取当前编辑器内的全量文本内容。

方案1：提交时主动读取内容（推荐，性能最优） #

不需要实时同步内容，只在表单提交的节点读取编辑器内容即可，适合绝大多数表单场景。

1. 调整HTML结构，加入表单与用于提交的隐藏字段（异步提交场景可省略隐藏字段）：

<!doctype html>
<meta charset=utf8>
<h1>CodeMirror C# 脚本编辑器</h1>
<form id="script_submit_form" method="POST" action="/your-api-endpoint">
  <!-- 隐藏字段，用于承载编辑器内容随表单提交 -->
  <input type="hidden" name="csharp_script" id="csharp_script_field">
  <div id="_formengine_script"></div>
  <button type="submit">提交脚本</button>
</form>
<script src="editor.bundle.js"></script>

2. 调整JS逻辑，绑定表单提交事件读取内容：

import {StreamLanguage} from "@codemirror/language"
import {csharp} from "@codemirror/legacy-modes/mode/clike"
import {EditorView, basicSetup} from "codemirror"

const editor = new EditorView({
  extensions: [basicSetup, StreamLanguage.define(csharp)],
  parent: document.getElementById('_formengine_script')
})

// 绑定表单提交逻辑
document.getElementById('script_submit_form').addEventListener('submit', () => {
  // 读取编辑器当前全量内容
  const scriptContent = editor.state.doc.toString()
  // 同步到隐藏字段，随表单原生POST提交
  document.getElementById('csharp_script_field').value = scriptContent

  // 如果是fetch/axios异步提交，直接使用scriptContent即可，无需隐藏字段
  // 示例：
  // fetch('/your-api-endpoint', {
  //   method: 'POST',
  //   headers: {'Content-Type': 'application/json'},
  //   body: JSON.stringify({script: scriptContent})
  // })
})

方案2：实时同步内容到表单字段 #

如果业务逻辑要求表单字段的值和编辑器内容实时一致，可以通过CodeMirror自带的更新监听扩展，在内容每次变化时自动同步：

import {StreamLanguage} from "@codemirror/language"
import {csharp} from "@codemirror/legacy-modes/mode/clike"
import {EditorView, basicSetup} from "codemirror"

const scriptField = document.getElementById('csharp_script_field')

// 自定义内容同步扩展
const syncValueExtension = EditorView.updateListener.of((update) => {
  // 仅当文档内容发生变化时执行同步，减少无效操作
  if (update.docChanged) {
    scriptField.value = update.state.doc.toString()
  }
})

const editor = new EditorView({
  extensions: [basicSetup, StreamLanguage.define(csharp), syncValueExtension],
  parent: document.getElementById('_formengine_script')
})

注意：初始化编辑器时不要在挂载的容器DOM内放任何子节点，否则会被编辑器实例覆盖，导致内容丢失。

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