본문으로 건너뛰기

빠른 시작 가이드

Edybara의 각 구성요소는 여러개의 패키지로 나뉘어 배포됩니다. 사용자는 필요한 구성요소만을 선택하여 자신만의 에디터를 구성하거나, 모든 구성 요소가 통합된 @edybara/preset 패키지만을 사용할 수도 있습니다. 본문은 해당 패키지를 사용하여 최소한의 코드로 에디터를 생성하는 방법을 설명합니다.

의존성 설치​

Edybara 을 사용하기 위해서는 기반인 ProseMirror 를 함께 설치해야 합니다. 사용하는 패키지 매니저에 따라 아래의 설치 명령어를 사용합니다.

npm install prosemirror-state \
            prosemirror-model \
            prosemirror-view \
            @edybara/preset

전역 스타일 설정​

Edybara을 사용하기 위해선 제공되는 css를 프로젝트의 전역 스타일에 추가해야 합니다. 각 프로젝트 환경의 전역 스타일 설정 지침을 따라 @edybara/preset/styles/preset.css 을 포함하세요. 하단의 코드는 index.html 에 스타일을 추가하는 방법의 예시입니다.

/src/index.html
<html>
  <head>
    <link rel="stylesheet" href="@edybara/preset/styles/preset.css">
  </head>
  <body>
    <div id="editor"></div>
  </body>
</html>
정보

scss 를 선호하는 경우 @edybara/preset/styles/preset.scss 를 사용할 수 있습니다.

에디터 인스턴스 생성​

@edybara/preset 은 에디터에서 사용할 서식인 edybaraPresetSchema 와 에디터의 UI/UX 를 담당하는 플러그인의 집합인 edybaraPresetPlugins를 제공합니다. 아래는 ProseMirror 의 API 를 통해 에디터 인스턴스를 생성하는 방법의 예시입니다.

/src/index.ts
import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { edybaraPresetSchema, edybaraPresetPlugins } from '@edybara/preset';

const view = new EditorView(
  // 에디터가 생성될 위치의 Div Element 를 지정해야 합니다.
  document.querySelector('#editor'),
  {
    state: EditorState.create({
      schema: edybaraPresetSchema(),
      plugins: edybaraPresetPlugins(),
    }),
  },
);

안내된 설치 지침을 완료한 경우, 렌더링된 에디터의 모습은 아래와 같습니다.

프레임워크와 함께 사용​

현재 Edybara은 프레임워크를 위한 별도의 추상화 계층을 제공하지 않습니다. 따라서 각 환경에 맞는 ProseMirror 추상화 라이브러리를 함께 사용하는 것이 도움이 될 수 있습니다. 관련 프로젝트는 아래의 링크를 참조하세요.