MediumEditor는 사용자가 텍스트를 편집하는 데 사용되는 유명한 WYSIWYG 에디터입니다. 이 에디터에는 기본적으로 툴바가 포함되어 있으며 사용자는 해당 툴바를 사용하여 텍스트 스타일을 수정하고 추가 기능을 실행할 수 있습니다. 그러나 때로는 툴바의 표시 방식을 변경하고자 할 수도 있습니다.

이 문서에서는 MediumEditor에서 에디터 툴바의 표시 방식을 변경하는 방법을 알아보겠습니다.

1. 툴바의 표시 위치 변경하기

기본적으로 MediumEditor의 툴바는 에디터의 상단에 표시됩니다. 그러나 이를 변경하여 원하는 위치에 표시할 수도 있습니다.

var editor = new MediumEditor('.editable', {
    toolbar: {
        /* 툴바 표시 위치 변경 */
        static: true
    }
});

위 코드에서 static 속성을 true로 설정함으로써 툴바를 고정된 위치에 표시할 수 있습니다. 이 위치를 변경하려면 CSS를 추가하여 툴바를 원하는 위치로 이동시킬 수 있습니다.

2. 툴바의 버튼 숨기기

툴바에는 여러 가지 작업을 수행하는 버튼이 있습니다. 그러나 특정 버튼을 숨기고 싶다면 아래 코드를 사용할 수 있습니다.

var editor = new MediumEditor('.editable', {
    toolbar: {
        /* 특정 버튼 숨기기 */
        buttons: ['bold', 'italic', 'underline'],
        static: true
    }
});

위 코드에서는 buttons 배열에 원하는 버튼만 남기고 다른 버튼을 숨깁니다.

3. 커스텀 툴바 디자인 적용하기

MediumEditor의 툴바는 기본적으로 일반적인 디자인을 가지고 있습니다. 그러나 필요에 따라 커스텀 디자인을 적용할 수도 있습니다. 이를 위해서는 CSS를 사용하여 툴바 요소를 스타일링하면 됩니다.

.medium-editor-toolbar {
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    /* 툴바에 커스텀 스타일 추가 */
}

.medium-editor-toolbar button {
    /* 버튼 스타일 변경 */
    font-size: 14px;
    padding: 5px 10px;
    /* 버튼에 커스텀 스타일 추가 */
}

위 CSS 코드는 툴바의 배경색, 텍스트 색상, 버튼의 스타일을 변경하는 예시입니다. 원하는 스타일을 적용하여 커스텀 툴바 디자인을 만들 수 있습니다.

이 문서에서는 MediumEditor에서 에디터 툴바의 표시 방식을 변경하는 방법에 대해 알아보았습니다. 원하는 표시 위치로 툴바를 이동시키거나 원하는 버튼을 숨기는 등의 작업을 수행하여 MediumEditor를 보다 유연하게 사용할 수 있습니다.