为什么需要反应编辑器？
有大量基于代码的编辑器，例如CodeMirror，Monaco，Ace等，使我们能够将功能齐全的代码编辑器插入我们的网站。但是，如果您需要一个简单的编辑器来提供语法突出显示功能而又不添加任何其他x = complex功能，那么简单的代码编辑器就是您的最佳选择。额外的功能有时会被淘汰，因为它们通常不会占用很小的包装尺寸。 反应编辑器库只有一个目标，那就是提供一个简单的代码编辑器，该语法编辑器支持语法突出显示功能，而没有任何其他功能。非常适合简单的嵌入和表单，用户可以在其中提交代码。
反应 编辑器有哪些功能？
–react编辑器借助第三方库帮助我们突出显示模块化语法。
–该应用程序提供了可自定义缩进的功能，该功能允许您仅使用Tab键就可以缩进行或选择文本。
–它还在新行上提供自动缩进。
–该应用程序还具有一项功能，可让您使用括号，方括号或引号将所选文本换行。
–它还使您可以撤消整个单词，而不必通过擦除每个字母来浪费时间。
–通过在Mac设备上使用Ctrl + Shift + M，可访问性也变得很容易。另一个可能的命令是Ctrl + M，它允许您通过捕获Tab键进行切换。
安装过程
要安装该应用，请使用以下代码：
npm install react-简单代码编辑器
另一个可能的代码是：
纱线添加反应简单代码编辑器
如何使用该应用程序：
为了使用该编辑器，您需要一个第三方库来为您提供语法突出显示功能。例如，通过使用prismjs，它将看起来类似于以下代码：
重要的是要记住，根据语法突出显示项，可能必须包括其他CSS才能使语法突出显示起作用。
用于反应编辑器的道具
该编辑器接受文本区域接受的所有道具。除此之外，您还可以传递以下给出的道具：
值（字符串）–
编辑器的当前值是当前可见的代码。我们应该将其标记为受控道具。
onValueChange（字符串=> mixed) –
当编辑器的值更改时，将调用回调进行操作。发生此操作时，您将需要手动更新属性值。
突出显示（字符串=>字符串React.Node）-
这是将接收突出显示文本的回调。您将需要返回一个HTML字符串或一个React元素，并使用诸如Arizonajs之类的库突出显示语法。
tabSize（数字）–
These determine the number of characters to insert while still 预先ssing the tab key. An example of this is that when you need a 4 space indentation, the tab size will be 4 and the insert spaces will be true. The default setting should be kept at 2.
insertSpaces（布尔值）–
这确定您是否要使用空格进行缩进。默认设置为true。如果将其更改为false，则可能还需要更改选项卡的大小并将其设置为1。
ignoreTabKey（布尔值）–
在编辑者选择忽略的情况下，他们应按Tab键，以便键盘用户可以在编辑器旁进行切换。当设置为false时，用户还可以通过对Mac设备使用Ctrl + Shift + M和Ctrl + M（如上所述）来切换此行为。默认情况下，该设置为false。
填充（数量）–
这是代码的可选填充功能。缺省值为0。
文本区域Id (string) –
这将创建一个id来在文本区域下划线，并且对于设置标签很有用。
文本区域ClassName (string) –
In order to have more 预先cise controls over the styles, a className for the underlying text area can be very useful.
预先ClassName (string)-
Along with the text area, a classname for the underlying 预先 can also provide more 预先cise control of the styles.
该过程的演示-
可在此网站上找到此过程的演示。相同的链接如下所示：
satya164.github.io/react-simple-code-editor
它是如何工作的？
该应用程序首先叠加一个语法，该语法突出显示为 <pre> block over a <textarea>。当您键入，选择，复制文本或进行其他移动时，您将继续与基础<textarea>。这就是为什么这种体验如此原始的原因。与重新实现该行为的其他编辑器相比，此处使用的方法非常简单方便。
可以使用任何第三方库来完成语法高亮显示的过程，只要该库以HTML返回结果并向用户提供完全控制权即可。
原始文本区域不支持插入用于缩进的制表符。这就是为什么我们尝试通过监听按键事件并以编程方式更新文本来重新实现该过程的原因。以编程方式更新文本的一个问题是我们丢失了撤消堆栈，因此我们需要维护自己的撤消堆栈。
结果，我们还可以实现改进的撤消行为，例如撤消整个单词，类似于VSCode这样的编辑器。
该计划有哪些限制？
由于程序的工作方式，因此会发生某些限制。
- 一个缺点是，我们突出显示的语法对其内容不能属于不同的字体系列，字体粗细，字体样式，行高等。因为编辑器是通过在文本区域上对齐突出显示的代码来工作的，所以更改影响布局的任何内容都可以很容易地将其对齐。
- 撤消/重做项目浏览器的上下文菜单实际上与自定义撤消堆栈不兼容。但是，其他功能齐全的编辑器也不支持浏览器的撤消/重做菜单项。
- 该编辑器不是高性能和大型文档的最佳选择，这会间接影响键入速度。
- 在文本区域中，可以使用-WebKit-text-fill-color：transparent来将文本隐藏在文本区域中。这适用于所有现代浏览器（甚至是非WebKit的浏览器，如Firefox和Edge）。在IE 10+上，我们使用color：transparent，它不会隐藏光标。在不受支持的浏览器中，文本可能会以粗体显示。
贡献-
在开发过程中，您可以运行示例应用程序以测试您的更改：
纱的例子
您需要确保您的代码通过Flow和ESLint。运行下面给出的代码进行验证：
纱线流动
纱线皮棉
为了解决格式错误，请运行以下代码：
纱线皮棉— –fix
