React-Monaco 是一款可以在 React 应用中使用 Monaco 编辑器的 npm 包。Monaco 编辑器是由微软开发的基于浏览器的代码编辑器，类似于 VS Code。本文将介绍如何在 React 应用中使用 React-Monaco，包括安装、初始化、配置以及使用示例等内容。
安装
安装 React-Monaco 的最简方式是使用 npm，在终端中输入以下命令：
npm install react-monaco --save
此时你的工程目录下的 node_modules 文件夹中就会添加 react-monaco 的包。
初始化
当安装完 React-Monaco 后，在你的项目中引入它。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ---------------
-------- ----- -
------ ------------- ---
-
-------------------- --- ---------------------------------当你使用 import 引入 MonacoEditor 时，就可以在应用中使用实时编辑器。当 React-Monaco 初始化到中将生成一个 div 作为容器，这样 Monaco 就可以在其中加载。你可以通过指定它的大小和关联文件，进行自定义设置。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ ------------ ---- ---------------
------ - -- ------ ---- ----------------
-- --- --- ------ --- --------- ------ ------ ----- --
------ -------------------------------------------------------------
------ -------------------------------------------------------------------
------ ----------------------------------------------
------ ---------------------------------------------
-------- ----- -
----- ------- - -
-------------------- ----
--
----- ---- - -------
-------- ---------------------- ------- -
----------------------------- --------
---------------
-
-------- ------------------ -- -
----------------------- --------- ---
-
------ -
-------------
-----------
------------
---------------------
---------------
------------
-----------------
-------------------
-------------------------------
---------------- ---- -------------------------- ------ - --- ------------------------- - --
--
--
-
-------------------- --- ---------------------------------以上示例中，我们引入了支持 Monaco 编辑器的 CSS 以及 JavaScript 模块（包含 Monaco 对象）。另外，我们实例化 react-monaco 组件，并对组件传递初始属性、编辑器的句柄、编辑器尺寸、编程语言以及更多其他选项。这里我们配置了一个 selectOnLineNumbers 选项，它将启用根据选择进行高亮显示的行号。
使用
除了上述示例中的基本配置外，React-Monaco 还支持更多的配置和操作接口。以下是一些常见的用法。
基本操作
MonacoEditor 在初始化时，它还可以返回编辑器的句柄和 Monaco 对象的映射。
-- -------------------- ---- -------
-------- ------------------ -- -
----------------------- --------- ---
-
-------- ---------------------- ------- -
----------------------------- --------
---------------
-
-------- ---------------- -
----------------------- --------
-
-------------
-----------
------------
---------------------
---------------
-------------------
-------------------------------
-------------------
--在代码中，对于用户所做的每个更改，onChange 都会被触发。我们通过 editorDidMount 来设置编辑器的初始值。onSelect 可以在用户选择文本后调用。
提供选择的提示
Monaco 编辑器通常根据用户聚焦到的位置提供智能感知，这会根据已知的代码语言进行处理，弹出建议。我们可以通过设置 suggestionsProvider 来设置提示。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ ------------ ---- ---------------
------ - -- ------ ---- ----------------
-- --- --- ------ --- --------- ------ ------ ----- --
------ -------------------------------------------------------------
------ -------------------------------------------------------------------
------ ----------------------------------------------
------ ---------------------------------------------
-------- ----- -
----- ------- --------- - ----------------
-------- --------- -
---------------
-
-------- ------------ -
----------------
-
-------- ---------------------- ------- -
----------------------------- ------- --------
---------------------------------------------------- -
------------- --------------- --------- -
-- ------- -
------ -
------ --- --------------------------------- -- -------------------- ---
--------- -
- ------ ------------- --
-
--
-
------ -----
-
---
-
----- ------- - -
-------------------- -----
--------------------------- -----
--------------------- -----
--
----- ---- - -------
-------- ------------------ -- -
----------------------- --------- ---
-
------ -
-------------
-----------
------------
---------------------
---------------
------------
-----------------
-------------------
-----------------
-----------------------
-------------------------------
---------------- ---- -------------------------- ------ - --- ------------------------- - --
--
--
-
-------------------- --- ---------------------------------在上面的示例中，在编辑器上方添加了一些按钮。当鼠标悬停在该按钮上方时，会显示加载的文本。监听器 hoverLeave 同时返回该状态。
支持复杂的编辑器
对于复杂的编辑器应该如何处理和配置？
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------- ---- ------------
------ ------------ ---- ---------------
------ - -- ------ ---- ----------------
-- --- --- ------ --- --------- ------ ------ ----- --
------ -------------------------------------------------------------
------ -------------------------------------------------------------------
------ ----------------------------------------------
------ ---------------------------------------------
-------- ----- -
----- ------- - -
-------------------- -----
--------------------------- -----
--------------------- -----
--
----- ---- - --------- ----- --- ------------------ --------------
-------- ------------------ -- -
----------------------- --------- ---
-
-------- ---------------------- ------- -
----------------------------- ------- --------
--- ----- - ------------------------------ ----- --------------
-----------------------
-
------ -
-------------
-----------
------------
---------------------
---------------
------------
-----------------
-------------------
-------------------------------
---------------- ---- -------------------------- ------ - --- ------------------------- - --
--
--
-
-------------------- --- ---------------------------------这个简单的示例，展示出了如何设置编辑器的初始值，如何创建顶部辅助栏，以及更改语法高亮等内容。
结论
React-Monaco 是一种可帮助开发人员在 React 应用中获取 Monaco 编辑器功能的简单方式。本文介绍了 React-Monaco 集成、初始化、配置、和使用示例等内容。不断尝试和工具，有助于开发人员了解和熟悉应用程序，加速开发并提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556cf81e8991b448d3a3c