CodeMirror报错：Uncaught TypeError: editor.getValue() is not a function 求助

Hey Jamie, let's break down why you're hitting this error and how to fix it—since you said your earlier code worked, this is almost certainly an issue with how your editor variable is set up now.

Common Causes & Solutions #

1. You're using a DOM element instead of a CodeMirror instance

This is the most likely culprit. CodeMirror doesn't work by directly using the <textarea> DOM element—you need to create a CodeMirror instance from it using the library's API.

Wrong way (what you might be doing now):

// This gets the raw DOM element, not a CodeMirror instance
const editor = document.getElementById('your-textarea-id');

Right way:

// Create a CodeMirror instance and store it in your editor variable
const editor = CodeMirror.fromTextArea(document.getElementById('your-textarea-id'), {
  lineNumbers: true, // Add any config options you need
  mode: 'javascript'
});

Only the CodeMirror instance has the getValue() method—raw DOM elements don't, hence the error.

2. Your editor variable is out of scope

If you initialized the CodeMirror instance inside a function (like a DOMContentLoaded callback) but tried to access editor in your global executeCode() function, the variable won't exist where you need it.

Fix:
Either declare editor in the global scope, or move your executeCode() function inside the same scope where you initialize the editor:

// Global scope declaration
let editor;

document.addEventListener('DOMContentLoaded', () => {
  editor = CodeMirror.fromTextArea(document.getElementById('your-textarea-id'), {
    lineNumbers: true,
    mode: 'javascript'
  });
});

function executeCode() {
  const code = editor.getValue(); // Now editor is accessible here
  // Your code execution logic
}

3. You misspelled the element ID or CodeMirror failed to initialize

Double-check that the ID in your getElementById() call matches exactly the ID of your <textarea> in HTML. If CodeMirror can't find the element, it won't create a valid instance, and editor might be null or undefined.

Also, make sure you've correctly included the CodeMirror JS and CSS files in your HTML—if the library isn't loaded, the CodeMirror object won't exist at all (you'd see a separate error for that in the console).

Working Example Reference #

Here's a full, minimal example that should work, similar to your earlier working code:

<textarea id="codeEditor"></textarea>
<button onclick="executeCode()">Run Code</button>

<!-- Load CodeMirror assets first -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>

<script>
  // Initialize CodeMirror globally
  const editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), {
    lineNumbers: true,
    mode: 'javascript'
  });

  function executeCode() {
    try {
      const userCode = editor.getValue();
      // Execute the code (adjust this to your use case)
      const result = eval(userCode);
      console.log('Execution Result:', result);
      // Or display the result in a DOM element
    } catch (error) {
      console.error('Error running code:', error);
    }
  }
</script>

Give these fixes a shot—since your earlier code worked, you probably just made a small tweak to the initialization that broke the editor reference. Let me know if you're still stuck!

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