tui.editor

GFM Markdown 및 Wysiwyg 편집기 - 생산적이고 확장 가능

목차

• 패키지
• 왜 토스트 UI 편집자?
• 특징
• 예
• 브라우저 지원
• 요청 단계를 당기십시오
• 기여
• 토스트 UI 가족
• 사용
• 특허

? 패키지

토스트 UI 편집기

이름	설명
@toast-ui/editor	일반 JavaScript 구성 요소

토스트 UI 편집기 포장지

이름	설명
@toast-ui/react-editor	래퍼 구성 요소를 반응합니다
@toast-ui/vue-editor	vue 래퍼 구성 요소

토스트 UI 편집기 플러그인

이름	설명
@toast-ui/editor-plugin-chart	차트 렌더링 플러그인
@toast-ui/editor-plugin-code-syntax-highlight	코드 구문을 강조하는 플러그인
@toast-ui/editor-plugin-color-syntax	색상 편집 텍스트로 플러그인
@toast-ui/editor-plugin-table-merged-cell	테이블 열을 병합하는 플러그인
@toast-ui/editor-plugin-uml	UML 렌더링 플러그인

? 왜 토스트 UI 편집자?

Toast UI 편집기는 Markdown 모드 및 Wysiwyg 모드를 제공합니다. 마크 다운 생산과 같은 사용 유형에 따라 마크 다운을 편집 할 수 있습니다. 토스트 UI 편집기는 두 가지 사용에 도움이 될 수 있습니다. 마크 다운 모드 와 Wysiwyg 모드를 제공하므로 어느 시점에서도 전환 할 수 있습니다.

생산적인 마크 다운 모드

CommonMark + GFM 사양

오늘날 CommonMark 는 Facto DeCancdown 표준입니다. GFM (Github Plavored Markdown)은 CommonMark 를 기반 으로 한 또 다른 인기있는 사양입니다. 토스트 UI 편집기는 CommonMark 및 GFM 사양을 모두 따릅니다. 토스트 UI 편집기가 제공하는 생산적인 도구를 사용하여 문서를 쉽게 작성하면 사양이 지원되는 곳마다 생성 된 문서를 쉽게 열 수 있습니다.

• 라이브 미리보기 : 렌더링 된 HTML을 주시하면서 Markdown 편집. 편집은 즉시 적용됩니다.
• 스크롤 동기화 : 마크 다운과 미리보기 간의 동기 스크롤. 각각을 별도로 스크롤 할 필요가 없습니다.
• 구문 하이라이트 : 깨진 Markdown 구문을 즉시 확인할 수 있습니다.

쉬운 wysiwyg 모드

• 표 : 테이블의 문맥 메뉴를 통해 표의 열이나 행을 추가하거나 삭제할 수 있으며 셀에 텍스트를 배치 할 수도 있습니다.
• 사용자 정의 블록 편집기 : 사용자 정의 블록 영역은 내부 편집기를 통해 편집 할 수 있습니다.
• 복사 및 붙여 넣기 : 브라우저, 스크린 샷, Excel, PowerPoint 등의 모든 것을 붙여 넣습니다.

UI

• 도구 모음 : 툴바를 통해 편집중인 문서에 요소를 스타일링하거나 추가 할 수 있습니다.

• 다크 테마 : 다크 테마를 사용할 수 있습니다.

다양한 확장 기능 사용 - 플러그인

CommonMark와 GFM은 훌륭하지만 종종 더 많은 추상화가 필요합니다. Toast UI 편집기에는 Markdown 구문을 준수하는 강력한 플러그인이 제공됩니다.

5 개의 기본 플러그인이 다음과 같이 제공되며 NPM과 함께 다운로드하여 사용할 수 있습니다.

• chart : '차트'로 표시된 코드 블록은 토스트 UI 차트를 렌더링합니다.
• code-syntax-highlight : Prism.js가 제공 한 언어에 해당하는 코드 블록 영역을 강조 표시하십시오.
• color-syntax : Toast UI ColorPicker를 사용하면 GUI로 편집 텍스트의 색상을 변경할 수 있습니다.
• table-merged-cell : 테이블 헤더 및 신체 영역의 열을 병합 할 수 있습니다.
• uml : 'UML'으로 표시된 코드 블록은 UML 다이어그램을 렌더링합니다.

? 특징

• 뷰어 : 편집 영역없이 마크 다운 데이터 만 표시하는 모드를 지원합니다.
• 국제화 (I18N) : 영어, 네덜란드, 한국어, 일본어, 중국어, 스페인어, 독일어, 러시아어, 프랑스어, 우크라이나, 터키어, 핀란드, 체코, 아랍어, 폴란드어, 갈리아, 스웨덴어, 이탈리아어, 노르웨이어, 크로아티아 + 언어를 지원합니다.
• 위젯 :이 기능을 사용하면 문자열을 위젯 노드와 특정 RegExp 로 대체하는 규칙을 구성 할 수 있습니다.
• 사용자 정의 블록 : Markdown에서 지원하지 않는 노드는 사용자 정의 블록을 통해 정의 할 수 있습니다. 사용자 정의 블록으로 구문 분석 로직을 작성하여 원하는 것을 표시 할 수 있습니다.

? 예

• 기초적인
• 뷰어
• 모든 플러그인 사용
• 사용자의 플러그인 생성
• Toobar 버튼 사용자 정의
• 국제화 (I18N)

다음은 더 많은 예와 토스트 UI 편집기와 함께 연주합니다!

? 브라우저 지원

크롬	인터넷 익스플로러	가장자리	원정 여행	파이어 폭스
예	11+	예	예	예

? 요청 단계를 당기십시오

Toast UI 제품은 오픈 소스이므로 문제를 해결 한 후에 풀 요청 (PR)을 만들 수 있습니다. NPM 스크립트를 실행하고 다음 과정으로 자신을 개발하십시오.

설정

개인 저장소에 main 브랜치를 포크합니다. 로컬 컴퓨터에 복제하십시오. 노드 모듈을 설치하십시오. 개발을 시작하기 전에 오류가 있는지 확인해야합니다.

$ git clone https://github.com/{your-personal-repo}/tui.editor.git
$ npm install
$ npm run build toastmark
$ npm run test editor

토스트 UI 편집기는 NPM 작업 공간을 사용하므로 NPM7을 기반으로 환경을 설정해야합니다. 파괴를 사용하는 경우 패키지 당 직접 경로를 이동하여 종속성을 설치해야합니다.

개발하다

서버를 실행하여 코드를 저장하자마자 코드가 반사되는 것을 볼 수 있습니다. 테스트 케이스 추가를 놓치지 말고 녹색 권리를 얻지 마십시오.

Snowpack-Dev-Server를 실행하십시오

Snowpack을 사용하면 번들링없이 개발 서버를 실행할 수 있습니다.

$ npm run serve editor

WebPack-Dev-Server를 실행하십시오

레거시 브라우저 테스트가 필요한 경우 웹 팩을 사용하여 개발 서버를 실행할 수 있습니다.

$ npm run serve:ie editor

실행 테스트

$ npm test editor

요청 요청

PR을 업로드하기 전에 마지막으로 테스트를 실행하여 오류가 있는지 확인하십시오. 오류가 없으면 커밋하고 밀어 넣으십시오!

PR의 단계에 대한 자세한 내용은 기여 섹션의 링크를 참조하십시오.

기여

• 행동 강령
• 기고 가이드 라인
• 컨벤션을 커밋하십시오
• 지침을 발행하십시오

? 토스트 UI 가족

• 토스트 UI 캘린더
• 토스트 UI 차트
• 토스트 UI 그리드
• 토스트 UI 이미지 편집기
• 토스트 UI 구성 요소

사용

• Nhn Dooray! - 협업 서비스 (프로젝트, 메신저, 우편, 달력, 드라이브, 위키, 연락처)
• 미확인 - 비주얼 스튜디오 코드 확장

특허

이 소프트웨어는 MIT © NHN Cloud에 따라 라이센스가 부여됩니다.