react json editor ajrm
Locale Support & Other
경고:
이미 알고 계시겠지만, React-json-editor-ajrm의 원래 프로젝트는 적극적으로 유지관리되지 않으며 결국 더 이상 사용되지 않을 것입니다. 그래서 나는 공식적인 지원 중단 날짜를 정하기로 결정했습니다. 이에 대한 잠정 날짜는 2023년 6월 15일입니다.
프로젝트에 이를 사용한 사람들과 프로젝트에 어떤 방식으로든 기여한 사람들에게 감사의 말씀을 전하고 싶습니다. 나는 더 이상 이 프로젝트를 유지하고 싶지 않습니다. 그것은 내 소프트웨어 엔지니어 경력 초기에 만들어졌으며 오늘날의 표준이나 내 표준을 따라잡지 못했습니다.
하지만 걱정하지 마세요. 나는 이 프로젝트를 처음부터 다시 작성하여 새로운 생명을 불어넣고자 합니다.
나는 과거의 교훈을 받아들이고 현재 React-json-editor-ajrm이 겪고 있는 일부 문제를 피하고 싶습니다. 또 잘한 점을 강조하고 싶고, 계속 이어나가고 싶어요.
나는 이 새로운 프로젝트를 위해 enio에 집을 마련했습니다. 질문이나 의견이 있으시면 여기에 토론을 설정했습니다.
자바스크립트 객체 구문을 보고, 편집하고 디버깅하기 위한 스타일리쉬하고 편집기 같은 모듈식 반응 구성 요소입니다!
$ npm i --save react-json-editor-ajrm
import JSONInput from 'react-json-editor-ajrm';
import locale from 'react-json-editor-ajrm/locale/en';
<JSONInput
id = 'a_unique_id'
placeholder = { sampleObject }
colors = { darktheme }
locale = { locale }
height = '550px'
/>
힌트 : 두 개의 서로 다른 루트 경로가 있습니다: react-json-editor-ajrm 및 react-json-editor-ajrm/es . 첫 번째에는 폴리필된 ES5 코드가 포함되어 있고, 두 번째에는 폴리필되지 않은 ES6 코드가 포함되어 있습니다. react-json-editor-ajrm/es 버전은 create-react-app 과 호환되지 않습니다 . 어떤 것이 필요하거나 원하는지 확실하지 않은 경우 첫 번째를 선택하세요. 도구 및 브라우저와 가장 잘 호환됩니다.
./examples 폴더에는 두 가지 예가 포함되어 있습니다.
$ cd path/to/repo/react-json-editor-ajrm/example/webpack-project
$ npm i
$ npm start
http://localhost:8080 엽니다. placeholder 속성에 자바스크립트 개체를 허용합니다.English , German , Spanish , Chinese , French , Indonesian , Russian , Hindi , Japanese 및 Tamil 에 대한 로케일 지원. | 이름 | 설명 | 유형 | 필수의 |
|---|---|---|---|
| 장소 | 편집기의 로캘입니다. 다음과 같이 로케일을 가져옵니다. import locale from 'react-json-editor-ajrm/locale/en' . 자세히 알아보기 | 물체 | 필수적인 |
| ID | 실제 텍스트 입력 DOM 노드에 할당할 선택적 id . 텍스트 입력 외에도 다음 노드는 ID를 받습니다: {id}-outer-box , {id}-container , {id}-warning-box , {id}-labels | 끈 | 선택 과목 |
| 자리 표시자 | 구성요소가 마운트되면 표시될 유효한 자바스크립트 개체를 보냅니다. 구성 요소의 초기 콘텐츠를 다시 렌더링하려면 다른 값을 할당하세요. | 물체 | 선택 과목 |
| 다시 놓기 | 구성 요소가 항상 placeholder 속성에 제공된 값으로 다시 렌더링되거나 '재설정'되도록 하려면 true 보냅니다. | 부울 | 선택 과목 |
| 보기 전용 | 표시되는 콘텐츠를 편집할 수 없도록 하려면 true 보내십시오. | 부울 | 선택 과목 |
| 변경 시 | onKeyPress 이벤트가 발생할 때마다 콘텐츠 값이 반환됩니다. | 물체 | 선택 과목 |
| 흐림 | onBlur 이벤트가 발생할 때마다 콘텐츠 값을 반환합니다. | 물체 | 선택 과목 |
| 확인좋아요 | 올바른 구문을 숨기기 위해 체크 표시를 하려면 false 보내십시오. | 부울 | 선택 과목 |
| 키 | 전체 구성 요소의 특정 높이를 설정하는 약식 속성입니다. | 끈 | 선택 과목 |
| 너비 | 전체 구성 요소의 특정 너비를 설정하는 약식 속성입니다. | 끈 | 선택 과목 |
| onKeyPressUpdate | 키를 누를 때 구성 요소가 자동으로 업데이트되지 않도록 하려면 false 보냅니다. | 부울 | 선택 과목 |
| 키를 누른 후 기다려 | 키를 누른 후 콘텐츠를 다시 렌더링하기 전에 기다려야 하는 시간(밀리초)입니다. 지정되지 않은 경우 값은 기본적으로 1000 입니다. 즉, 1초 이내에 마지막 키 입력 이후 추가 키 입력이 없으면 구성 요소가 업데이트됩니다. 100 밀리초 미만이면 차이가 없습니다. | 숫자 | 선택 과목 |
| 수정오류텍스트 | 구성요소의 원래 경고 텍스트를 수정하는 사용자 정의 함수입니다. 이 함수는 string 유형의 단일 매개변수를 수신하며 동일하게 string 반환해야 합니다. | 기능 | 선택 과목 |
| 오류 | 다음 속성을 포함합니다. | 물체 | 선택 과목 |
| 오류.이유 | 사용자 정의 오류 메시지가 포함된 문자열 | 끈 | 선택 과목 |
| 오류 줄 | 사용자 정의 오류 메시지와 관련된 줄 번호를 나타내는 숫자 | 숫자 | 선택 과목 |
| 주제 | 사용할 기본 제공 테마를 지정합니다. | 끈 | 선택 과목 |
| 그림 물감 | 다음 속성을 포함합니다. | 물체 | 선택 과목 |
| 색상.기본값 | braces 및 comma 와 같은 기호에 대한 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.문자열 | string 값으로 식별되는 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.번호 | integeter , double 또는 float 값으로 식별되는 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.콜론 | colon 으로 식별되는 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.키 | keys 또는 속성 이름으로 식별되는 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| colors.keys_whiteSpace | 따옴표로 묶인 keys 식별되는 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.기본 | boolean 값 및 null로 식별되는 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.오류 | error 태그가 표시된 토큰의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.배경 | 구성요소 배경의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 색상.배경_경고 | 구성 요소 상단에 표시되는 경고 메시지의 16진수 색상 코드입니다. | 끈 | 선택 과목 |
| 스타일 | 다음 속성을 포함합니다. | 물체 | 선택 과목 |
| 스타일.외부 상자 | 컴포넌트 외부 컨테이너 div의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.컨테이너 | 컴포넌트 container 의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.경고상자 | 경고 메시지 컨테이너 div의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.오류메시지 | 경고 메시지의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.바디 | 행 레이블 및 코드의 컨테이너 div의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.라벨열 | 행 레이블의 컨테이너 div의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.라벨 | 각 행 레이블의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
| 스타일.컨텐츠박스 | 코드 컨테이너 div의 기본 스타일을 수정하는 속성입니다. | 물체 | 선택 과목 |
outerBox
+-- container
+--- warningBox
+---- errorMessage
+--- body
+---- labelColumn
+----- labels
+---- contentBox
+----- auto generated markup
RJEA가 콘텐츠를 다시 렌더링할 때마다 onChange 속성에 전달된 모든 함수는 다음 키와 값이 포함된 단일 개체 매개변수를 받습니다.
| 열쇠 | 설명 |
|---|---|
| 일반 텍스트 | 줄바꿈과 들여쓰기를 포함하는 콘텐츠의 문자열 표현입니다. console.log()에 적합합니다. |
| 마크업텍스트 | 콘텐츠를 렌더링하는 데 사용되는 자동 생성 마크업의 문자열 표현입니다. |
| JSON | 콘텐츠의 JSON.stringify 버전입니다. |
| jsObject | 콘텐츠의 javascript object 버전입니다. 콘텐츠의 구문이 올바르지 않으면 undefined 반환합니다. |
| 윤곽 | 표시할 콘텐츠에 대해 렌더링된 줄 수입니다. |
| 오류 | 내용의 구문이 올바르지 않은 한 false 반환합니다. 이 경우 오류가 발생한 위치와 reason 에 해당하는 token 과 line 번호가 포함된 객체를 반환합니다. |
RJEA는 내장 테마를 지원합니다. 목록은 다음과 같습니다.
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE.md 파일을 참조하세요.
이 훌륭한 사람들에게 감사드립니다 ?:
앤드류 레디칸 ? ? | 패트릭 삭스 ? | 앨런 켈 ? | 에스벤vb | 마르쿠스 페트리코프스키 | 릭 브런스테트 | 더티캣 ? |
세드릭 ? | 라디트 ? | 아스켓 ? | CGVedant ? | 셰바즈 자프리 ? | 바산타 쿠마르 RB ? | 아디티야 페리왈 ? |
알렉세이 리아호프 | 테렌스 후인 | 리차드 헐 | tonynguyenit18 |
이 프로젝트는 모든 기여자 사양을 따릅니다. 어떤 종류의 기여도 환영합니다!
