[javascript] MediumEditor에서 에디터 툴바 버튼에 글꼴 선택 기능 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 텍스트를 편집하고 서식을 지정할 수 있는 기능을 제공하는 자바스크립트 기반의 텍스트 편집기입니다. 기본적으로 툴바에는 텍스트 서식을 변경할 수 있는 여러 가지 버튼이 포함되어 있지만, 글꼴 선택 기능은 기본으로 제공되지 않습니다. 이 글에서는 MediumEditor에 글꼴 선택 기능을 추가하는 방법에 대해 알아보겠습니다.

1. MediumEditor 라이브러리 연결하기

먼저, MediumEditor 라이브러리를 프로젝트에 연결해야 합니다. 라이브러리를 다운로드해서 프로젝트 폴더에 저장한 다음, HTML 파일에서 다음과 같이 연결할 수 있습니다.

<link rel="stylesheet" href="path/to/medium-editor.css">
<script src="path/to/medium-editor.js"></script>

2. 글꼴 선택 버튼 추가하기

MediumEditor의 툴바에 글꼴 선택 버튼을 추가하기 위해 Buttons 객체를 사용할 수 있습니다. 다음은 글꼴 선택 버튼을 추가하는 예제 코드입니다.

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

function FontExtension() {
    this.name = 'font';
    this.init = function () {
        this.button = this.document.createElement('button');
        this.button.classList.add('medium-editor-action');
        this.button.innerHTML = 'Font';
        this.on(this.button, 'click', this.onClick.bind(this));
        this.getEditorOption('elementsContainer').appendChild(this.button);
    };
    this.onClick = function () {
        // 글꼴 선택 기능 추가하기
    };
}

위의 코드에서 FontExtension 객체는 font 라는 이름으로 확장 기능을 정의합니다. init 함수에서는 버튼을 생성하고 툴바에 추가하는 작업을 수행합니다. onClick 함수에서는 글꼴 선택 기능을 구현하면 됩니다.

3. 글꼴 선택 기능 구현하기

버튼을 클릭했을 때 보여지는 팝업 메뉴에서 사용자가 원하는 글꼴을 선택할 수 있도록 구현해야 합니다. 다음은 글꼴 선택 기능을 구현하는 예제 코드입니다.

this.onClick = function () {
    var fontMenu = document.createElement('div');
    fontMenu.style.position = 'absolute';
    fontMenu.style.top = '100%';
    fontMenu.style.left = '0';
    fontMenu.style.padding = '5px';
    fontMenu.style.backgroundColor = '#fff';
    fontMenu.style.border = '1px solid #ddd';
    fontMenu.style.boxShadow = '0 1px 5px rgba(0, 0, 0, 0.2)';
    
    var fontList = ['Arial', 'Helvetica', 'Times New Roman', 'Courier New', 'Verdana'];
    for (var i = 0; i < fontList.length; i++) {
        var fontOption = document.createElement('div');
        fontOption.innerHTML = fontList[i];
        fontOption.style.marginBottom = '5px';
        fontOption.style.cursor = 'pointer';
        fontOption.addEventListener('click', function (event) {
            // 선택한 글꼴을 적용하는 로직 추가하기
        });
        fontMenu.appendChild(fontOption);
    }
    
    this.getEditorOption('elementsContainer').appendChild(fontMenu);
};

위의 코드에서 onClick 함수에서는 글꼴 선택을 위한 메뉴를 동적으로 생성하고 툴바 아래에 표시합니다. fontList 배열에는 선택할 수 있는 글꼴 목록을 정의할 수 있습니다. 각 글꼴 옵션을 클릭했을 때 적절한 로직을 추가하여 선택한 글꼴을 적용할 수 있습니다.

결론

이제 MediumEditor에 글꼴 선택 기능을 추가하는 방법을 알아보았습니다. MediumEditor의 툴바에 다양한 서식 변경 기능을 추가하고자 할 때, 위와 같이 확장 기능을 구현하면 원하는 기능을 유연하게 추가할 수 있습니다. 자세한 내용은 MediumEditor 공식 문서를 참고하시기 바랍니다.