For AI agents: the complete documentation index is available at /vue-codemirror6/llms.txt, the full documentation bundle is available at /vue-codemirror6/llms-full.txt, and this page is available as Markdown at /vue-codemirror6/api/instance.md.
vue-codemirror6
  • English

      • Instance API

      Access the instance through a template ref. Use the CodeMirrorExposed type for type checking.

      <script lang="ts" setup vapor>
import { onMounted, ref } from 'vue';
import CodeMirror, { type CodeMirrorExposed } from 'vue-codemirror6';

const cm = ref<CodeMirrorExposed>();

const insertDate = () => {
  cm.value?.replaceSelection(new Date().toISOString());
};
</script>

<template>
  <code-mirror ref="cm" basic />
  <button type="button" @click="insertDate">Insert date</button>
</template>
      Info

      The editor is created after mount. Until the ready event, view and the values derived from it are undefined or empty.

      Properties

      PropertyTypeDescription
      viewEditorView | undefinedThe EditorView. Use it for anything not wrapped by the component.
      editorHTMLElement | undefinedThe root element that contains the editor.
      domElement | undefinedThe editable content element.
      selectionEditorSelection | undefinedGets or sets the selection.
      cursornumberGets or sets the cursor position.
      focusbooleanGets or sets the focus state.
      lengthnumberLength of the document.
      jsonRecord<string, StateField<unknown>>Gets or sets the state as a JSON-serializable object.
      diagnosticCountnumberNumber of lint diagnostics. See diagnosticCount.

      Methods

      MethodDescription
      lint()Runs the linter immediately. Only works when the linter prop is set.
      forceReconfigure()Removes and re-registers all extensions.

      CodeMirror 5 compatible methods

      These methods are provided for users familiar with CodeMirror 5. The properties above and view are usually sufficient, so active use is not recommended.

      MethodDescription
      getRange(from?: number, to?: number)Gets the text between the given positions.
      getLine(number: number)Gets the content of a line.
      lineCount()Gets the number of lines.
      getCursor()Gets one end of the primary selection.
      listSelections()Gets all current selection ranges.
      getSelection()Gets the selected text.
      getSelections()Gets the text of every selection range.
      somethingSelected()Returns true if any text is selected.
      replaceRange(replacement: string | Text, from, to)Replaces the text between from and to.
      replaceSelection(replacement: string | Text)Replaces the selection(s).
      setCursor(position: number)Sets the cursor position.
      setSelection(anchor: number, head?: number)Sets a single selection range.
      setSelections(ranges: readonly SelectionRange[], primary?: number)Sets multiple selection ranges.
      extendSelectionsBy(f: (range: SelectionRange) => number)Extends every selection by the result of f.