react ace

반응-종족

ACE에 대한 반응 성분 세트

버전 8의 참고 사항! : 우리는 브레이스에 대한 지원을 중단했으며 이제 Ace-Builds를 사용합니다. 마이그레이션 방법에 대한 문서를 읽으십시오. 예제가 업데이트되고 있습니다.

React Ace의 데모

React Ace Split 편집기의 데모

React Ace Diff 편집기의 데모

설치하다

npm install react-ace ace-builds

yarn add react-ace ace-builds

기본 사용

 import React from "react" ;
import { render } from "react-dom" ;
import AceEditor from "react-ace" ;

import "ace-builds/src-noconflict/mode-java" ;
import "ace-builds/src-noconflict/theme-github" ;
import "ace-builds/src-noconflict/ext-language_tools" ;

function onChange ( newValue ) {
  console . log ( "change" , newValue ) ;
}

// Render editor
render (
  < AceEditor
    mode = "java"
    theme = "github"
    onChange = { onChange }
    name = "UNIQUE_ID_OF_DIV"
    editorProps = { { $blockScrolling : true } }
  /> ,
  document . getElementById ( "example" )
) ; 

예

WebPack을 사용하는 작업 예제에 대한 example 디렉토리를 확인하십시오.

선적 서류 비치

에이스 편집기

분할보기 편집기

DIFF 편집기

모드, 테마 및 키보드 핸들러를 추가하는 방법

자주 묻는 질문

버전 8으로 마이그레이션합니다

후원자

매월 기부금으로 우리를 지원하고 활동을 계속할 수 있도록 도와주세요. [후원자가되기]

스폰서

귀하의 사이트에 대한 링크를 통해 스폰서가되어 Github의 README에 로고를 받으십시오. [후원자가되기]