一、主流代碼編輯器方案

1. Monaco Editor (VS Code 內(nèi)核)

bash
代碼解讀
復(fù)制代碼
npm install monaco-editor

javascript
代碼解讀
復(fù)制代碼
// 初始化示例
import * as monaco from 'monaco-editor';

const editor = monaco.editor.create(document.getElementById('container'), {
  value: '// 寫你的JavaScript代碼\nconsole.log("Hello")',
  language: 'javascript',
  theme: 'vs-dark',
  minimap: { enabled: true },
  automaticLayout: true
});

核心優(yōu)勢(shì)：

• VS Code同款語法高亮/智能提示
• 支持 TypeScript、JSX 等高級(jí)特性
• 內(nèi)置 Debugger 集成能力

2. CodeMirror 6 (現(xiàn)代化輕量級(jí))

bash
代碼解讀
復(fù)制代碼
npm install codemirror @codemirror/lang-javascript

javascript
代碼解讀
復(fù)制代碼
import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';

const editor = new EditorView({
  state: EditorState.create({
    extensions: [javascript(), EditorView.theme({
      "&": { fontSize: '14px' },
      ".cm-content": { fontFamily: 'Menlo' }
    })]
  }),
  parent: document.querySelector('#editor')
});

亮點(diǎn)：

• 模塊化設(shè)計(jì)（按需加載）
• 移動(dòng)端友好
• 支持實(shí)時(shí)協(xié)同編輯

3. Ace Editor (Cloud9 同款)

html
代碼解讀
復(fù)制代碼
<!-- CDN 方式直接使用 -->
<div id="editor" style="height:300px"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.0/ace.js"></script>
<script>
  const editor = ace.edit('editor');
  editor.setTheme('ace/theme/monokai');
  editor.session.setMode('ace/mode/javascript');
</script>

特點(diǎn)：

• 開箱即用的傳統(tǒng)方案
• 支持 Emmet 縮寫
• 自帶多光標(biāo)編輯功能

二、功能對(duì)比表

三、高級(jí)功能擴(kuò)展方案

1. 集成代碼執(zhí)行沙箱

javascript
代碼解讀
復(fù)制代碼
// 使用 iframe 安全執(zhí)行代碼
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);

function safeEval(code) {
  iframe.contentWindow.eval(`
    try { 
      ${code} 
    } catch(e) { 
      parent.postMessage({ error: e.message }, '*') 
    }
  `);
}

2. 添加 ESLint 實(shí)時(shí)校驗(yàn)

javascript
代碼解讀
復(fù)制代碼
// 配合 monaco-editor-eslint 插件
import { ESLint } from 'eslint';
import { MonacoEslint } from 'monaco-editor-eslint';

const eslint = new ESLint({ fix: true });
const monacoEslint = new MonacoEslint(eslint, editor);

3. 實(shí)現(xiàn)多人協(xié)作

javascript
代碼解讀
復(fù)制代碼
// 使用 Yjs 庫 + CodeMirror 協(xié)同插件
import { WebrtcProvider } from 'y-webrtc';
import { yCollab } from 'y-codemirror';
import { EditorState } from '@codemirror/state';

const doc = new Y.Doc();
const provider = new WebrtcProvider('room-name', doc);
const state = EditorState.create({ extensions: [yCollab(doc.getText('content'))] });

四、移動(dòng)端優(yōu)化技巧

css
代碼解讀
復(fù)制代碼
/* 防止手機(jī)端鍵盤遮擋 */
.editor-container {
  height: calc(100vh - env(keyboard-inset-height));
}

/* 禁用長按菜單 */
.editor {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}

選型建議：

• 企業(yè)級(jí)應(yīng)用 → 選 Monaco (功能最全)
• 教育類網(wǎng)站 → 選 CodeMirror (移動(dòng)優(yōu)先)
• 快速原型 → 選 Ace (CDN直用)