Source Editor

GitLab의 Source Editor 사용법, API, 확장 기능 개발 방법을 설명합니다.

Source Editor는 GitLab의 편집 UX를 제공합니다. Monaco 에디터 를 감싼 얇은 래퍼로, 필요한 헬퍼와 추상화를 제공하며 확장 기능 을 통해 Monaco를 확장합니다. 다음을 포함한 여러 GitLab 기능에서 사용됩니다: Web IDE CI Linter 스니펫 Web Editor 보안 정책 Source Editor를 사용해야 하는 경우 # 사용자가 파일 내용을 편집해야 할 때만 Source Editor를 사용하세요. 소스 코드를 표시만 하면 되는 경우에는 BlobContent 컴포넌트를 사용하는 것을 고려하세요. 작업 중인 페이지에 이미 Source Editor가 로드되어 있다면, Source Editor에서 읽기 전용 콘텐츠를 표시하는 것도 여전히 유효한 방법입니다. Source Editor 사용 방법 # Source Editor는 프레임워크에 독립적이며 Rails와 Vue를 포함한 모든 애플리케이션에서 사용할 수 있습니다. 통합을 돕기 위해 전용 <source-editor> Vue 컴포넌트를 제공하지만, Source Editor의 통합은 일반적으로 간단합니다: Source Editor 가져오기: import SourceEditor from '~/editor/source_editor'; 뷰(view)에 대한 전역 에디터 초기화: const editor = new SourceEditor({ // Editor Options. // The list of all accepted options can be found at // https://microsoft.github.io/monaco-editor/docs.html }); 에디터 인스턴스 생성: editor.createInstance({ // Source Editor configuration options. }) Source Editor 인스턴스는 다음 설정 옵션을 허용합니다: 옵션 필수 여부 설명 el true HTML Node: 에디터를 렌더링할 요소. blobPath false String: 에디터에 렌더링할 파일 이름. 해당 파일에 사용할 올바른 구문 강조 도구를 식별하거나 다른 파일 유형에 사용됩니다. 실제 파일 이름을 알 수 없거나 역할이 없을 때 *.js 같은 와일드카드를 허용합니다. blobContent false String: 에디터에 렌더링할 초기 콘텐츠. extensions false Array: 이 인스턴스에서 사용할 확장 기능. blobGlobalId false String: 자동 생성된 속성. Editor Options false Object(s): 위 목록에 없는 모든 속성은 이 특정 인스턴스의 Editor Option으로 처리됩니다. 이 필드를 사용하여 인스턴스 수준에서 전역 Editor Options를 재정의하세요. Editor Options의 전체 인덱스를 사용할 수 있습니다. `blobGlobalId` 속성은 향후 릴리즈에서 제거될 수 있습니다. blobGlobalId 가 필요한 특정 사용 사례가 없다면 표준 blob 속성을 사용