리치 텍스트 편집기 개발 가이드라인

GitLab 리치 텍스트 편집기(WYSIWYG)의 구조, 사용 방법, 확장 구현, Markdown 직렬화 등 개발 가이드라인을 설명합니다.

리치 텍스트 편집기는 GitLab 애플리케이션에서 GitLab Flavored Markdown 을 위한 WYSIWYG 편집 환경을 제공하는 UI 컴포넌트입니다. 또한 정적 사이트 생성기와 같이 다른 엔진을 대상으로 하는 Markdown 중심 편집기를 구현하기 위한 기반으로도 사용됩니다. 리치 텍스트 편집기를 구축하기 위해 Tiptap 2.0 과 ProseMirror 를 사용합니다. 이 프레임워크들은 네이티브 contenteditable 웹 기술 위에 추상화 계층을 제공합니다. 사용 가이드 # 기능에 리치 텍스트 편집기를 포함시키려면 아래 지침을 따르세요. 리치 텍스트 편집기 컴포넌트 포함하기 . Markdown 설정 및 가져오기 . 변경 사항 수신하기 . 리치 텍스트 편집기 컴포넌트 포함하기 # ContentEditor Vue 컴포넌트를 임포트하세요. ContentEditor는 큰 의존성이므로 캐싱을 활용하기 위해 비동기 이름 있는 임포트(asynchronous named imports)를 사용하는 것을 권장합니다. <script> export default { components: { ContentEditor: () => import( /* webpackChunkName: 'content_editor' */ '~/content_editor/components/content_editor.vue' ), }, // rest of the component definition } </script> 리치 텍스트 편집기에는 두 가지 속성이 필요합니다: renderMarkdown 은 Markdown API 호출의 응답(문자열)을 반환하는 비동기 함수입니다. uploadsPath 는 multipart/form-data 를 지원하는 GitLab 업로드 서비스 를 가리키는 URL입니다. 이 두 속성의 프로덕션 예시는 WikiForm.vue 컴포넌트를 참고하세요. Markdown 설정 및 가져오기 # ContentEditor Vue 컴포넌트는 Markdown 설정과 가져오기가 비용이 큰 작업이기 때문에 Vue 데이터 바인딩 플로( v-model )를 구현하지 않습니다. 데이터 바인딩을 사용하면 사용자가 컴포넌트와 상호작용할 때마다 이러한 작업이 트리거됩니다. 대신, initialized 이벤트를 수신하여 ContentEditor 클래스의 인스턴스를 얻어야 합니다: <script> import { createAlert } from '~/alert'; import { __ } from '~/locale'; export default { methods: { async loadInitialContent(contentEditor) { this.contentEditor = contentEditor; try { await this.contentEditor.setSerializedContent(this.content); } catch (e) { createAlert({ message: __('Could not load initial docume