npm install codemirror react-codemirror2 @types/codemirror

import React, { useRef, useEffect } from 'react';
import CodeMirror, { EditorFromTextArea } from 'codemirror';
import 'codemirror/lib/codemirror.css';
// 導入需要的語言模式和樣式主題
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/css/css';
import 'codemirror/mode/htmlmixed/htmlmixed';
import 'codemirror/theme/material.css';  // 加載的樣式主題 https://codemirror.net/5/theme/
// 定義組件屬性類型
interface CodeMirrorEditorProps {
  value: string;
  language: string;
  theme?: string;
  height?:Number;
  width?:Number;
  onChange: (value: string) => void;
  onShiftEnter?: () => void;
  onBlur?: (value: string) => void;
  onChangeLine?: () => void;
}
const CodeMirrorEditor: React.FC<CodeMirrorEditorProps> = (props) => {
  const { language } = props;
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const editorRef = useRef<EditorFromTextArea>();
  useEffect(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    initCodeMirror();
    return () => {
      // 清理和銷毀編輯器實例
      editorRef.current?.toTextArea();
    };
  }, []);
  const initCodeMirror = ()=>{
    const editorConfig = {
      tabSize: 2, // 制表符的寬度。默認為 4。
      fontSize: '16px', // 字體大小
      autoCloseBrackets: true, // 在鍵入時自動關閉括號和引號
      showCursorWhenSelecting: true, // 當選擇處于活動狀態(tài)時是否應繪制光標。默認為 false。這里設置成自動補全
      lineWrapping: true, // ，CodeMirror 是否應該滾動或換行。默認為false(滾動)。這里設置成換行
      lineNumbers: true, // 是否在編輯器左側顯示行號
      fullScreen: true, //當設置為 時true，將使編輯器全屏顯示（如占據(jù)整個瀏覽器窗口）。
      mode:language, // 使用模式
      theme: 'material' // 編輯器樣式的主題 必須確保.cm-s-[name] 加載定義相應樣式的 CSS 文件。默認值為"default"，顏色包含在 中codemirror.css?？梢砸淮问褂枚鄠€主題類，例如將和類"foo bar"都分配給編輯器。cm-s-foocm-s-bar
    };
    editorRef.current = CodeMirror.fromTextArea(textareaRef.current!, editorConfig);
    // 監(jiān)聽編輯器內容變化事件
    editorRef.current.on('change', codemirrorValueChange);
    editorRef.current.on('keydown', keydown);
    editorRef.current.on('blur', blur);
     const { value, width, height } = props;
     editorRef.current.setValue(value || '');
     if (width || height) {
      editorRef.current.setSize(width, height);
     }
  }
  /** 失焦 */
  const  blur = (instance:any) => {
    if (props.onBlur) {
      props.onBlur(instance.doc.getValue());
    }
  };
  /** 鍵盤按鍵按下 */
  const keydown = (_:any, change:any) => {
    if (change.shiftKey === true && change.keyCode === 13) {
      if (props.onShiftEnter) {
        props.onShiftEnter();
      }
      change.preventDefault();
    }
  };
  /** 編輯內容變化 */
  const codemirrorValueChange = (doc:any, change:any) => {
    doc.eachLine((line:any) => {
      if(line.text.startsWith('//') || line.text.startsWith('#')) {
        doc.addLineClass(line, 'wrap', 'notes');
      } else if (line.wrapClass === 'notes') {
        doc.removeLineClass(line, 'wrap', 'notes');
      }
    });
    if (change.origin !== 'setValue') {
      if (props.onChange) {
        props.onChange(doc.getValue());
      }
    }
  };
  return (
    <textarea ref={textareaRef} />
  );
};
export default CodeMirrorEditor;

import React, { useState } from 'react';
import CodeMirrorEditor from 'CodeMirror';
const CodeEditor: React.FC = () => {
  const [code, setCode] = useState<string>('');
  const handleCodeChange = (value: string) => {
    setCode(value);
  };
  return (
    <div>
      <CodeMirrorEditor
        value=[code]
        language="javascript"
        onChange={handleCodeChange}
      />
      <pre>[code]</pre>
    </div>
  );
};
export default CodeEditor;

.CodeMirror {
  height: 300px;
}

// 注冊JavaScript代碼提示
const registerHelp = () =>{
	CodeMirror.registerHelper('hint', 'javascript', (editor, options) => {
	  const cursor = editor.getCursor();
	  const token = editor.getTokenAt(cursor);
	  const word = token.string;
	  // 假設你的關鍵字列表存儲在keywords數(shù)組中
	  const keywords = ['if', 'else', 'for', 'while', 'function', 'class'];
	  const list = keywords.filter((keyword) => keyword.startsWith(word));
	  return {
	    list,
	    from: CodeMirror.Pos(cursor.line, token.start),
	    to: CodeMirror.Pos(cursor.line, token.end),
	  };
	});
}

useEffect(() => {
    const textarea = textareaRef.current;
    if (!textarea) return;
    registerHelp(); // 注冊代碼提示
    initCodeMirror();
    return () => {
      // 清理和銷毀編輯器實例
      editorRef.current?.toTextArea();
    };
  }, []);

 /** 編輯內容變化 */
  const codemirrorValueChange = (doc:any, change:any) => {
    doc.eachLine((line:any) => {
      if(line.text.startsWith('//') || line.text.startsWith('#')) {
        doc.addLineClass(line, 'wrap', 'notes');
      } else if (line.wrapClass === 'notes') {
        doc.removeLineClass(line, 'wrap', 'notes');
      }
    });
	// 判斷是輸入擇匹配出提示代碼
	if (change.origin === '+input') {
      CodeMirror.commands.autocomplete(editor.current, undefined, {
        completeSingle: false,
      });
    }
    if (change.origin !== 'setValue') {
      if (props.onChange) {
        props.onChange(doc.getValue());
      }
    }
  };