MediumEditor는 웹에서 사용할 수 있는 WYSIWYG(What You See Is What You Get) 텍스트 편집기입니다. 이 편집기는 기본적으로 텍스트 스타일을 설정할 수 있는 툴바 버튼을 제공하지만, 기본 제공되지 않는 특정 텍스트 스타일 선택 기능을 추가하고 싶은 경우가 있습니다. 이 블로그 포스트에서는 MediumEditor에 특정 텍스트 스타일 선택 기능을 추가하는 방법에 대해 알아보겠습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 설치해야 합니다. 다음 명령어를 사용하여 MediumEditor를 설치합니다.

npm install medium-editor

2. 텍스트 스타일 선택 기능 추가하기

MediumEditor에 텍스트 스타일 선택 기능을 추가하기 위해 다음 단계를 따릅니다.

2.1. 버튼 추가하기

MediumEditor의 툴바에 텍스트 스타일 선택을 위한 버튼을 추가해야 합니다. 이를 위해서는 MediumEditor의 options 객체에 buttons 속성을 설정하면 됩니다. 예를 들어, 볼드체와 이탤릭체를 선택할 수 있는 버튼을 추가하는 코드는 다음과 같습니다.

var editor = new MediumEditor('.editable', {
  buttons: ['bold', 'italic']
});

2.2. 스타일 변경 기능 구현하기

버튼이 추가되었지만, 실제로 텍스트 스타일이 변경되도록 기능을 구현해야 합니다. 이를 위해서는 execCommand 메소드를 사용하여 텍스트 스타일을 변경할 수 있습니다. 예를 들어, 볼드체 기능을 추가하는 코드는 다음과 같습니다.

var editor = new MediumEditor('.editable', {
  buttons: ['bold', 'italic'],
  toolbar: {
    buttons: ['bold', 'italic'],
    static: true,
    sticky: true
  },
  extensions: {
    'bold': new MediumEditor.extensions.bold(),
    'italic': new MediumEditor.extensions.italic()
  }
});

위 코드에서 bold와 italic은 MediumEditor에서 이미 구현된 텍스트 스타일입니다. 필요한 스타일에 따라 다른 속성을 사용하면 됩니다.

3. 사용자 정의 스타일 추가하기

특별한 스타일을 추가하려는 경우, 직접 사용자 정의 스타일을 만들 수도 있습니다. 예를 들어, highlight 스타일을 추가하여 텍스트를 하이라이트할 수 있는 기능을 구현하는 코드는 다음과 같습니다.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'highlight'],
    static: true,
    sticky: true
  },
  extensions: {
    'bold': new MediumEditor.extensions.bold(),
    'italic': new MediumEditor.extensions.italic(),
    'highlight': new MediumEditor.extensions.create({'name': 'highlight', 'action': 'highlight', 'aria': 'highlight'})
  }
});

위 코드에서 highlight는 사용자 정의 스타일을 추가하는 예시입니다. 이처럼 필요한 기능에 맞게 사용자 정의 스타일을 추가하여 원하는 텍스트 스타일을 선택할 수 있습니다.

결론

MediumEditor는 기본적으로 제공되는 기능 외에도 사용자 정의 스타일을 추가하여 텍스트 스타일 선택 기능을 확장할 수 있는 훌륭한 텍스트 편집기입니다. 위에서 제시한 방법을 활용하여 원하는 텍스트 스타일 선택 기능을 추가할 수 있습니다. MediumEditor의 공식 문서에서 더 많은 정보와 예제를 확인할 수 있습니다.

참고: MediumEditor는 오픈 소스 프로젝트로, MIT 라이선스를 따릅니다.