如何獲取CodeMirror-6編輯器的文本值

Question

我正在玩 CodeMirror 來檢查我是否可以在我們的站點中使用它來允許用戶編寫 c# 腳本。 我可以很容易地制作一個樣本，但我找不到任何關於讓編輯器的文本值通過表單發送的文檔。

JS來源：

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

import {EditorView, basicSetup} from "codemirror"

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

索引.html：

<!doctype html>
<meta charset=utf8>
<h1>CodeMirror!</h1>
<div id="_formengine_script"></div>
<script src="editor.bundle.js"></script>

我認為必須有多種方法來解決它，但我不能。 我找到了很多關於 CodeVersion 5 的信息，但我更願意使用最新版本。

Answer 1

遇到同樣的問題。 codemirror 6 文檔很奇怪。 它包含許多深入的潛水，但缺乏基礎知識。

我最終查看了單元測試而不是文檔。 您會在歷史模塊中找到一個很好的測試，該測試會更改文檔，然后檢查文檔是否包含預期的數據。

基於此，您最終得到以下結果：

editor.state.doc.toString();

更新：就在寫完這篇文章后，我偶然發現了https://codemirror.net/docs/migration/只是去“獲取文檔和選擇”一章。 它包含您搜索的示例。

Answer 2

編輯器允許一次標記多個選擇范圍（下例）

您可以使用這段代碼獲取所有選定的范圍

editor.state.selection.ranges

這里有一個示例如何從所有范圍中獲取第一個選定的文本。

let firstRange = editor.state.selection.ranges.at(0);
let selectedText = editor.state.doc.toString().substring(firstRange.from,firstRange.to)
console.log(selectedText); //output: 'ECT * FR'

可以禁用多模式選擇，但訪問所選范圍的方式保持不變。

如何獲取CodeMirror-6編輯器的文本值

問題描述

2 個解決方案

解決方案1
0 2022-07-16 16:26:06

解決方案2
0 2023-01-07 19:57:25

如何獲取CodeMirror-6編輯器的文本值

問題描述

2 個解決方案

解決方案1 0 2022-07-16 16:26:06

解決方案2 0 2023-01-07 19:57:25

解決方案1
0 2022-07-16 16:26:06

解決方案2
0 2023-01-07 19:57:25