MediumEditor는 강력한 WYSIWYG(What You See Is What You Get) 텍스트 편집기로, 툴바를 통해 다양한 편집 기능을 제공합니다. 기본적으로 툴바는 편집 영역 위에 나타나지만, 툴바의 위치를 변경하는 방법에 대해 알아보겠습니다.

1. 툴바를 편집 영역 아래로 이동하기

var editor = new MediumEditor('.editable', {
    toolbar: {
        static: true,
        sticky: true,
        stickyTopOffset: 0
    }
});

위의 코드는 툴바를 편집 영역 아래로 이동시키는 방법입니다. toolbar 객체의 static 속성을 true로 설정하여 툴바를 편집 영역 아래로 고정시킵니다. sticky 속성을 true로 설정하여 스크롤에 따라 툴바가 고정되도록 합니다. stickyTopOffset 속성은 툴바가 고정될 때 편집 영역 위로부터의 간격을 조절하는 값입니다.

2. 툴바를 편집 영역 외부로 이동하기

var editor = new MediumEditor('.editable', {
    toolbar: {
        diffLeft: 0,
        diffTop: -37
    }
});

위의 코드는 툴바를 편집 영역 밖으로 이동시키는 방법입니다. toolbar 객체의 diffLeft 속성을 0으로 설정하여 툴바가 편집 영역 왼쪽에 위치하도록 합니다. diffTop 속성은 툴바의 상단 위치를 편집 영역 상단보다 위로 올리는 값입니다.

3. 수정된 위치로 툴바 크기 재조정하기

툴바 위치를 변경한 후에는 툴바의 크기가 올바르게 조정되지 않을 수 있습니다. 이 경우에는 다음의 코드를 사용하여 툴바 크기를 조정할 수 있습니다.

editor.subscribe('editableInput', function (event, editable) {
    editor.toolbar.updateToolbar();
});

위의 코드는 편집 영역에 입력이 발생할 때마다 툴바의 크기를 재조정합니다.

MediumEditor에서 툴바 위치를 변경하는 방법에 대해 알아보았습니다. 이를 통해 편집기의 사용자 인터페이스를 조정하고 사용자 경험을 향상시킬 수 있습니다.

Reference:

• MediumEditor 공식 문서