react项目实现代码编辑器

1、CodeMirror

CodeMirror是一个用于编辑代码的JavaScript库，它可以在浏览器中实现多功能文本编辑器。CodeMirror支持多种语言模式和附加组件，可以用于编辑HTML、CSS、JavaScript等文件。

以下是在React项目中使用CodeMirror的步骤：

1. 安装依赖：npm install codemirror
2. 引入CodeMirror：import CodeMirror from 'codemirror'
3. 创建编辑器：const editor = CodeMirror.fromTextArea(myTextArea, {mode: 'javascript'})
4. 渲染编辑器：将编辑器渲染到页面中的某个元素中

完整代码示例：

import React, { useState } from 'react';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import CodeMirror from 'codemirror';

function Editor() {
  const [code, setCode] = useState('');

  const handleChange = (newCode) => {
    setCode(newCode);
  };

  return (
    <div>
      <textarea value={code} onChange={handleChange} />
      <CodeMirror
        value={code}
        options={{ mode: 'javascript', theme: 'material' }}
        onChange={handleChange}
      />
    </div>
  );
}

export default Editor;

在上面的示例中，我们首先引入了CodeMirror库和相关的样式文件。然后，我们定义了一个Editor组件，它包含一个textarea和一个CodeMirror编辑器。当用户在textarea中输入代码时，我们通过handleChange函数更新CodeMirror编辑器的值。最后，我们将CodeMirror编辑器渲染到页面中。

除了基本的配置之外，我们还可以通过CodeMirror提供的API来实现更多的功能，例如：

• 设置主题：editor.setOption('theme', 'monokai')
• 启用自动补全：editor.on('change', () => {...})
• 自定义语法高亮：editor.getOption('theme').addRule('myCustomLanguage', { style: 'color: #ff0000' })

完整的配置示例：

import React, { useState } from 'react';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import CodeMirror from 'codemirror';

function Editor() {
  const [code, setCode] = useState('');

  const handleChange = (newCode) => {
    setCode(newCode);
  };

  const handleThemeChange = (e) => {
    editor.setOption('theme', e.target.value);
  };

  const handleAutocomplete = (e) => {
    editor.on('change', () => {
      // do something when the editor changes
    });
  };

  const handleCustomHighlighting = (language) => {
    editor.getOption('theme').addRule(language, { style: 'color: #ff0000' });
  };

  return (
    <div>
      <select value={theme} onChange={handleThemeChange}>
        <option value="default">Default</option>
        <option value="monokai">Monokai</option>
        <option value="solarized-dark">Solarized Dark</option>
      </select>
      <textarea value={code} onChange={handleChange} />
      <button onClick={handleAutocomplete}>Enable Autocomplete</button>
      <button onClick={() => handleCustomHighlighting('myCustomLanguage')}>Custom Highlighting</button>
      <CodeMirror
        value={code}
        options={{ mode: 'javascript', theme: theme }}
        onChange={handleChange}
      />
    </div>
  );
}

export default Editor;

在上面的示例中，我们添加了一些额外的功能，例如设置主题、启用自动补全和自定义语法高亮。我们使用了CodeMirror提供的API来实现这些功能，并将它们与Editor组件的状态一起管理。

2、monaco-editor

Monaco Editor是一个基于浏览器的代码编辑器，它提供了丰富的功能和语法高亮。在React项目中使用Monaco Editor可以让我们轻松地实现一个功能强大的代码编辑器。

以下是在React项目中使用Monaco Editor的步骤：

1. 安装依赖：npm install monaco-editor
2. 引入Monaco Editor：import MonacoEditor from 'monaco-editor'
3. 创建编辑器：<MonacoEditor value={code} />
4. 渲染编辑器：将编辑器渲染到页面中的某个元素中

完整代码示例：

import React, { useState } from 'react';
import 'monaco-editor/min/vs/editor/editor.main.css';
import MonacoEditor from 'monaco-editor';

function Editor() {
  const [code, setCode] = useState('');

  const handleChange = (newCode) => {
    setCode(newCode);
  };

  return (
    <div>
      <textarea value={code} onChange={handleChange} />
      <MonacoEditor value={code} />
    </div>
  );
}

export default Editor;

在上面的示例中，我们首先引入了Monaco Editor库和相关的样式文件。然后，我们定义了一个Editor组件，它包含一个textarea和一个Monaco Editor编辑器。当用户在textarea中输入代码时，我们通过handleChange函数更新Monaco Editor编辑器的值。最后，我们将Monaco Editor编辑器渲染到页面中。

除了基本的配置之外，我们还可以通过Monaco Editor提供的API来实现更多的功能，例如：

• 设置主题：editor.setTheme("myCustomTheme")
• 启用自动补全：editor.onDidChangeModelContent(() => {...})
• 自定义语言模式：editor.getModel().addLanguages(['myCustomLanguage'])

完整的配置示例：

import React, { useState } from 'react';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import CodeMirror from 'codemirror';
import MonacoEditor from 'monaco-editor';

function Editor() {
  const [code, setCode] = useState('');

  const handleChange = (newCode) => {
    setCode(newCode);
  };

  const handleThemeChange = (e) => {
    editor.setTheme(e.target.value);
  };

  const handleAutocomplete = (e) => {
    editor.onDidChangeModelContent(() => {
      // do something when the model content changes
    });
  };

  const handleLanguageAddition = (language) => {
    editor.getModel().addLanguages([language]);
  };

  return (
    <div>
      <select value={theme} onChange={handleThemeChange}>
        <option value="vs-dark">Dark Theme</option>
        <option value="vs">Light Theme</option>
      </select>
      <textarea value={code} onChange={handleChange} />
      <button onClick={handleAutocomplete}>Enable Autocomplete</button>
      <button onClick={() => handleLanguageAddition('myCustomLanguage')}>Add Language</button>
      <MonacoEditor value={code} theme={theme} />
    </div>
  );
}

export default Editor;

在上面的示例中，我们添加了一些额外的功能，例如设置主题、启用自动补全和添加自定义语言模式。我们使用了Monaco Editor提供的API来实现这些功能，并将它们与Editor组件的状态一起管理。