js：使用vue-codemirror实现一个语法高亮的网页代码编辑器

### 如何在 `vue-codemirror` 编辑器中运行 JavaScript 代码 要在 `vue-codemirror` 编辑器中实现 JavaScript 代码的编辑和运行功能，可以按照以下方法操作： #### 配置 CodeMirror 的模式支持 为了使 `vue-codemirror` 支持 JavaScript 语法高亮显示，需要加载对应的 JavaScript 模式文件。可以通过设置 `mode` 参数来指定语言模式为 `"javascript"`。 ```javascript import { Codemirror } from 'vue-codemirror' import 'codemirror/mode/javascript/javascript' // 加载 JavaScript 模式 export default { components: { Codemirror }, data() { return { cmOptions: { mode: 'javascript', // 设置为 JavaScript 模式[^1] theme: 'default', lineNumbers: true, gutters: ["CodeMirror-lint-markers", "CodeMirror-linenumbers", "CodeMirror-foldgutter"] // 添加额外的功能栏[^3] } }; } }; ``` #### 实现代码执行逻辑 要让编辑器中的 JavaScript 代码能够被实际运行，可以在按钮点击事件或其他触发机制下调用 `eval()` 函数或者通过创建 `<script>` 标签动态注入并执行代码。 以下是基于 `eval()` 方法的一个简单示例： ```html <template> <div> <Codemirror v-model="code" :options="cmOptions"></Codemirror> <button @click="runCode">Run</button> <pre>{{ output }}</pre> </div> </template> <script> export default { data() { return { code: '', // 存储用户输入的代码 output: '' // 显示运行结果 }; }, methods: { runCode() { try { this.output = eval(this.code); // 执行用户的代码 } catch (error) { this.output = error.message; // 如果发生错误，则捕获异常消息 } } } }; </script> ``` 需要注意的是，在生产环境中使用 `eval()` 可能存在安全风险，因为它会直接执行传入字符串作为代码的内容。如果允许外部用户提供任意脚本片段，可能会引发 XSS（跨站点脚本攻击）。因此建议仅用于学习目的或受控环境下的开发调试工具。 对于更复杂的场景，比如沙盒化执行上下文中隔离潜在危险的操作，可考虑采用 Web Worker 或 iframe 来承载独立线程内的计算任务。 --- ###