[javascript] MediumEditor에서 에디터 툴바 이동하기

30 Nov 2023

javascript

MediumEditor는 웹 기반의 WYSIWYG 에디터로서, 사용자가 웹 페이지에서 쉽게 텍스트를 편집할 수 있게 해줍니다. 이 문서에서는 MediumEditor에서 에디터 툴바를 이동하는 방법을 알아보겠습니다.

MediumEditor 툴바 이동하기

MediumEditor의 툴바는 에디터 상단에 위치하고 있습니다. 디폴트로는 에디터 바로 위에 툴바가 표시되지만, 때로는 툴바를 다른 위치로 이동시켜야 할 수도 있습니다.

툴바를 이동하기 위해서는 toolbar 옵션을 사용해야 합니다. toolbar 옵션은 배열 형태로 표현되며, 각 요소는 툴바에 표시될 버튼을 나타냅니다. 예를 들면 다음과 같습니다:

var editor = new MediumEditor('.editable', {
    toolbar: {
        buttons: ['bold', 'italic', 'underline', 'anchor', 'header1', 'header2', 'quote'],
        static: true,
        align: 'center',
        sticky: true,
        updateOnEmptySelection: false
    }
});

위의 코드에서 toolbar 옵션은 툴바에 표시될 버튼들을 정의하고 있습니다. 각 버튼은 해당하는 기능을 수행할 수 있도록 에디터에 추가됩니다. 이 배열을 수정하여 원하는 버튼들을 포함할 수 있습니다.

툴바 위치 변경하기

툴바를 다른 위치로 이동시키기 위해서는 toolbar의 align 속성을 사용해야 합니다. 이 속성은 툴바가 위치할 방향을 정의하는데 사용됩니다. 다음과 같이 값을 설정할 수 있습니다:

'left': 툴바가 왼쪽에 위치합니다.
'center': 툴바가 가운데에 위치합니다.
'right': 툴바가 오른쪽에 위치합니다.

var editor = new MediumEditor('.editable', {
    toolbar: {
        align: 'left'
    }
});

위의 코드에서는 툴바를 왼쪽으로 이동시키고 있습니다. 이와 같은 방식으로 align 값을 변경하여 원하는 위치로 툴바를 이동시킬 수 있습니다.

마무리

MediumEditor에서 에디터 툴바를 이동하는 방법에 대해 알아보았습니다. 툴바를 원하는 위치로 이동시키고 싶을 때는 toolbar 옵션의 align 속성을 사용하여 조정할 수 있습니다. 이를 통해 사용자 경험을 개선하고 텍스트 편집에 편의성을 제공할 수 있습니다.

이 문서는 MediumEditor 공식 문서를 참고하여 작성되었습니다.