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 。在不支持的瀏覽器中，文本可能看起來更大膽。