MediumEditor는 사용하기 쉬운 WYSIWYG 텍스트 에디터입니다. 이 툴을 사용하여 텍스트를 편집하는 경우, 에디터의 툴바 스타일을 변경하여 사용자 정의할 수 있습니다.

MediumEditor의 툴바는 CSS 스타일링으로 변경할 수 있습니다. 다음은 툴바를 스타일링하는 방법에 대한 예제입니다.

먼저 HTML 파일에 MediumEditor를 추가하세요:

<div id="editor"></div>

<script src="medium-editor.js"></script>
<script src="your-script.js"></script>

그리고 your-script.js 파일을 생성하여 다음 코드를 추가하세요:

var editor = new MediumEditor('#editor', {
    toolbar: {
        static: true,
        align: 'center',
        buttons: ['bold', 'italic', 'underline', 'strikethrough']
    }
});

위의 코드에서 toolbar.buttons 배열은 툴바에 표시할 버튼의 종류를 지정합니다.

툴바 버튼을 스타일링하려면 CSS 파일을 생성하고 툴바 버튼 클래스를 선택한 후 원하는 스타일을 적용하세요:

.medium-editor-button.bold-button {
    font-weight: bold;
}

.medium-editor-button.italic-button {
    font-style: italic;
}

.medium-editor-button.underline-button {
    text-decoration: underline;
}

.medium-editor-button.strikethrough-button {
    text-decoration: line-through;
}

위의 코드는 각각 굵게, 이탤릭체, 밑줄, 취소선 버튼을 스타일링하는 예제입니다.

MediumEditor에서 다양한 스타일을 사용자 정의할 수 있으며, 위의 예시는 버튼의 스타일을 변경하는 방법을 보여줍니다. 필요한 경우 다양한 CSS 속성을 사용하여 툴바 버튼에 추가적인 스타일을 적용할 수도 있습니다.

더 많은 정보와 사용 예제는 MediumEditor 공식 문서를 참조하세요.