react在线编辑器项目

### 创建 React 在线编辑器项目

#### 使用 `react-simple-code-editor`

`react-simple-code-editor` 提供了一个简单的无多余功能的代码编辑器组件，带有语法高亮显示。此库非常适合那些希望快速集成基本代码编辑功能的应用程序。

import CodeMirror from 'react-codemirror';
import 'codemirror/lib/codemirror.css';

function App() {
  const handleCodeChange = (newCodeValue) => console.log(newCodeValue);

  return (
    <div>
      <h2>Simple Code Editor</h2>
      <CodeMirror
        value="console.log('Hello world!');"
        onChange={handleCodeChange}
        options={{
          mode: "javascript",
          theme: "material",
          lineNumbers: true,
        }}
      />
    </div>
  );
}

export default App;

[^1]

#### 利用 Monaco Editor 构建复杂应用

对于更复杂的场景，Monaco Editor 是 Visual Studio Code 中使用的同一款强大的在线代码编辑器插件。它提供了丰富的特性集，尽管其 API 文档可能较难理解。下面是一个简单例子展示如何初始化并配置一个 Monaco 编辑实例：

import * as monaco from 'monaco-editor';
import './App.css';

const editorDidMount = (editor, monaco) => {
  console.log('Editor mounted');
};

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Monaco Editor Example</h1>
        <div style={{ width: 800, height: 600 }}>
          <monaco-editor language="typescript" theme="vs-dark" defaultValue="// some comment" onMount={editorDidMount} />
        </div>
      </header>
    </div>
  );
}

export default App;

[^3]

#### WangEditor 富文本编辑器简易方案

当需求较为基础时，WangEditor 可能是最合适的选择之一。这款富文本编辑器易于上手且具备良好的文档支持，适合不需要高度定制化的应用场景。

import React, { useRef } from 'react';
import E from 'wangeditor';

function App() {
  let editor;

  function createEditor() {
    if (!editor) {
      editor = new E('#editorElem');

      // 配置 onchange 回调函数，将数据同步到 state 或者 Vuex 中
      editor.config.onchange = (newHtml) => {
        console.log('change:', newHtml);
      };

      // 创建编辑器
      editor.create();
    }
  }

  return (
    <>
      <button onClick={() => createEditor()}>Create Editor</button>

      {/* 编辑区域 */}
      <div id="editorElem"></div>
    </>
  );
}

export default App;

[^4]

#### NodeGUI 跨平台桌面应用程序开发

如果目标是构建跨平台桌面级应用而非纯粹网页端，则可以考虑采用 React-NodeGUI 组合来实现高性能原生界面效果的同时享受 Web 技术栈带来的便利性。

<!-- package.json -->
{
  ...
  "main": "./src/main.ts",  
  "scripts": {
     "start": "nodegui ./src/main.ts"
  },
  ...
}

// src/App.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Window, Application, FlexLayout } from '@nodegui/nodegui';

class MyWidget extends React.Component {
  render() {
    return (
      <FlexLayout>
        <Label text="Hello World!" />
      </FlexLayout>
    );
  }
}

Application.init();

const win = new Window({
  title: 'My First Desktop App',
});

ReactDOM.render(<MyWidget />, win.getContentView());

win.show();
Application.exec();

[^2]