简介
react-codemirror2 是一个基于 React 的代码编辑器组件，它提供了丰富的功能和可定制化的选项。本文旨在介绍如何使用 npm 包 react-codemirror2 来集成一个好用的代码编辑器到你的项目中，并提供一些实际应用场景的示例。
安装
你需要首先安装 react 和 react-dom，然后再安装 react-codemirror2：
npm install react react-dom react-codemirror2
使用
其次，你需要在你的代码中导入 react-codemirror2 组件：
import React, { useState } from 'react';
import { Controlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';以上代码中我们导入了 Controlled 组件，这个组件将会让我们更好地控制 CodeMirror 组件。同时，我们还引入了 CodeMirror 所需的样式以及代码高亮所需的语法模式和主题。
接下来，在你的组件中使用 CodeMirror 组件：
-- -------------------- ---- -------
-------- ----- -
----- ------ -------- - -------------
-------- -------------------- ----- ------ -
---------------
-
------ -
-----------
------------
-----------------------------
----------
----- -------------
------ -----------
------------ -----
--
--
--
-
------ ------- ----以上代码中，我们定义了一个 App 组件，并使用 useState 钩子来定义一个名为 code 的状态。我们还编写了一个名为 handleChange 的函数，在这个函数中，我们将 CodeMirror 组件的值更新到 code 状态中。
最后，在 CodeMirror 组件中，我们传递了一些必要的属性和选项：
value:CodeMirror组件的默认值，我们把它与code状态绑定在一起。onBeforeChange:CodeMirror组件的变化回调函数，当组件的值发生变化时触发，我们在这里将CodeMirror组件的新值存储到code状态中。options:CodeMirror组件的选项，例如语法模式、主题以及是否显示行号等。
示例
自动补全
react-codemirror2 支持自动补全功能，你只需要引入相应的插件即可。下面是一个简单的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- -- ---------- - ---- --------------------
------ --------------------------------
------ --------------------------------
------ ----------------------------------------
------ --------------------------------------
------ -------------------------------------
------ -------------------------------------------
-------- ----- -
----- ------ -------- - -------------
-------- -------------------- ----- ------ -
---------------
-
------ -
-----------
------------
-----------------------------
----------
----- -------------
------ -----------
------------ -----
---------- - ------------- -------------- --
------------ - --------------- ----- --
--
--
--
-
------ ------- ----以上代码中，我们引入了 show-hint 和 javascript-hint 插件，并将它们添加到了 CodeMirror 组件的选项中。注意，在这里我们还添加了一些额外的选项：
extraKeys: 启用按键快捷键，当用户按下Ctrl-Space键时，
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56593