react simple code editor下载 - react simple code editor源代码下载

react simple code editor

其他资源

Release 0.14.1

下载

反应简单编码编辑器

带有语法突出显示的简单的无钢板代码编辑器。

为什么

几个基于浏览器的代码编辑器，例如ACE，CODEMIRROR，摩纳哥等。可以在网页中嵌入完整的代码编辑器。但是，如果您只需要一个带有语法突出显示而没有任何额外功能的简单编辑器，那么它们通常不会有过度杀伤，因为它们通常没有小的捆绑尺寸足迹。该库旨在为一个简单的代码编辑器提供语法突出显示支持，而无需任何额外功能，非常适合用户可以提交代码的简单嵌入和表单。

特征

模块化语法突出显示了第三方库
缩进线或通过按下可自定义的凹痕键的选项卡键或选定的文本
自动缩进新线条
将选定的文本包装在帕伦斯，括号或报价中
撤消整个单词，而不是字母
可访问，使用Ctrl+Shift+M （Mac） / Ctrl+M进行切换捕获选项卡键

安装

npm install react-simple-code-editor

或者

yarn add react-simple-code-editor

用法

您需要将编辑器与提供语法突出显示的第三方库一起使用。例如，它看起来像是prismjs的关注：

 import React from 'react' ;
import Editor from 'react-simple-code-editor' ;
import { highlight , languages } from 'prismjs/components/prism-core' ;
import 'prismjs/components/prism-clike' ;
import 'prismjs/components/prism-javascript' ;
import 'prismjs/themes/prism.css' ; //Example style, you can use another

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < Editor
      value = { code }
      onValueChange = { code => setCode ( code ) }
      highlight = { code => highlight ( code , languages . js ) }
      padding = { 10 }
      style = { {
        fontFamily : '"Fira code", "Fira Mono", monospace' ,
        fontSize : 12 ,
      } }
    />
  ) ;
}

请注意，根据您的语法荧光笔，您可能必须包括其他CSS以进行语法突出显示才能工作。

道具

编辑接受textarea接受的所有道具。此外，您可以通过以下道具：

value （ string ）：编辑器的当前值，即要显示的代码。这必须是受控的道具。
onValueChange （ string => mixed ）：编辑器的值更改时称为回调。调用时，您需要更新价值道具。
highlight （ string => string | React.Node ）：回调将接收文本以突出显示。您需要使用诸如prismjs之类的库来返回HTML字符串或React元素，并使用语法突出显示。
tabSize （ number ）：按下选项卡键时要插入的字符数。例如，对于4个空间缩进， tabSize将为4 ， insertSpaces将是true 。默认值： 2 。
insertSpaces （ boolean ）：是否使用空间进行凹痕。默认值： true 。如果将其设置为false ，则可能还需要将tabSize设置为1 。
ignoreTabKey （ boolean ）：编辑器是否应忽略选项卡键，以便键盘用户可以遵循编辑器。用户可以使用Ctrl+Shift+M （Mac） / Ctrl+M手动切换此行为false默认值： false 。
padding （ number ）：代码的可选填充。默认值： 0 。
textareaId （ string ）：基础textarea的ID，对于设置label很有用。
textareaClassName （ string ）：基础textarea的类名称，对于更精确地控制其样式很有用。
preClassName （ string ）：基础pre的className，对于更精确控制其样式可能是有用的。

演示

react-simple-code-editor.github.io/reeact-simple-code-editor

它如何工作

它通过将语法突出显示<pre>块上的<textarea>覆盖。当您键入，选择，复制文本等时，您会与基础<textarea>进行交互，因此体验感觉是本地的。与重新实现行为的其他编辑相比，这是一种非常简单的方法。

只要返回HTML并且由用户完全控制，任何第三方库就可以由任何第三方库进行。

Vanilla <textarea>不支持插入选项卡字符以进行凹痕，因此我们通过聆听keydown事件并编程更新文本来重新实现它。通过编程方式更新文本的一个警告是，我们将失去撤消堆栈，因此我们需要维护自己的撤消堆栈。结果，我们还可以实施改进的撤消行为，例如撤消与VSCODE这样的编辑类似的整个单词。

限制

由于其工作方式，它有一定的局限性：

语法突出显示的代码不能具有不同的字体家族，字体重量，字体样式，线高等。由于编辑器可以通过对A <textarea>进行对齐的突出显示代码的作用，因此更改影响布局的任何内容都可能将其错过。
自定义撤消堆栈与撤消/重做项目浏览器的上下文菜单不兼容。但是，其他精选编辑者也不支持浏览器的撤消/重做菜单项。
编辑器没有针对性能进行优化，大量文档可能会影响打字速度。
我们使用-webkit-text-fill-color: transparent文本中隐藏文本，它在所有现代浏览器中都起作用（甚至是非webkit的浏览器，例如Firefox和Edge）。在IE 10+上，我们使用color: transparent 。在不支持的浏览器中，文本可能看起来更大胆。