MediumEditor는 사용자에게 기능 풍부한 편집기를 제공하는 자바스크립트 라이브러리입니다. 이 툴바에는 다양한 편집 옵션이 포함되어 있지만, 기본적으로는 글머리 기호를 추가하는 기능이 없습니다. 이 글에서는 MediumEditor의 툴바에 글머리 기호 선택 기능을 추가하는 방법을 알아보겠습니다.

MediumEditor 설치하기

MediumEditor를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령을 사용하여 MediumEditor를 설치하세요:

npm install medium-editor

툴바 버튼 추가하기

MediumEditor의 툴바에 새로운 버튼을 추가하여 글머리 기호 기능을 활성화할 수 있습니다. 이를 위해 다음과 같이 코드를 작성해주세요:

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

위 코드에서 'unorderedlist' 버튼은 글머리 기호를 추가하는 기능을 나타냅니다.

글머리 기호 기능 구현하기

글머리 기호 기능을 활성화하기 위해 다음과 같이 코드를 추가해주세요:

editor.subscribe('editableKeydownEnter', function (event, editable) {
    var range = MediumEditor.selection.getSelectionRange(editable);
    var parentNode = MediumEditor.selection.getSelectedParentElement(range);

    if (range.startOffset === 0 && parentNode.tagName !== 'LI') {
        document.execCommand('insertOrderedList', false, null);
        event.preventDefault();
    }
});

위 코드는 Enter 키를 누를 때 <li> 태그가 아닌 부모 요소에 있는 경우에만 insertOrderedList 커맨드를 실행하여 글머리 기호를 삽입합니다. preventDefault() 함수를 사용하여 기본 Enter 행동을 방지합니다.

마무리

이렇게 하면 MediumEditor의 툴바에 글머리 기호 선택 기능이 추가됩니다. 사용자가 글머리 기호를 추가하려면 해당 텍스트를 입력한 후 Enter 키를 누르면 됩니다.

추가로, MediumEditor는 다양한 기능을 제공하므로 자세한 내용은 공식 문서를 참조해주세요.