[javascript] MediumEditor에서 에디터 툴바 컨텐츠 스타일링하기

30 Nov 2023

javascript

MediumEditor는 사용자가 웹 페이지에서 텍스트를 편집할 수 있는 강력한 에디터입니다. 이 에디터는 다양한 기능을 가지고 있으며, 편집된 내용을 스타일링하는 것도 가능합니다. 이번 블로그 포스트에서는 MediumEditor에서 에디터 툴바 컨텐츠의 스타일을 변경하는 방법에 대해 알아보겠습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 MediumEditor를 설치할 수 있습니다.

npm install medium-editor

2. 에디터 인스턴스 생성하기

MediumEditor을 설치한 후, HTML 문서에 에디터를 생성해야 합니다. 아래와 같이 간단한 HTML 코드를 작성하여 에디터 인스턴스를 생성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">
    <script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
</head>
<body>
    <div id="editor" contenteditable="true"></div>

    <script>
        var editor = new MediumEditor('#editor');
    </script>
</body>
</html>

위 코드에서는 contenteditable 속성을 true로 설정하여 #editor 요소를 MediumEditor의 텍스트 편집 영역으로 지정하고 있습니다.

3. 에디터 툴바 컨텐츠 스타일링하기

이제 에디터의 툴바 컨텐츠를 스타일링해 보겠습니다. MediumEditor에는 툴바 버튼들이 있으며, 이 버튼들의 스타일을 변경하여 사용자 정의 스타일을 적용할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">
    <style>
        .medium-editor-toolbar-buttons {
            background-color: #f1f1f1;
            border-bottom: 1px solid #ccc;
        }

        .medium-editor-toolbar-button {
            color: #333;
            padding: 8px;
            margin-right: 5px;
            border-radius: 3px;
            cursor: pointer;
        }

        .medium-editor-toolbar-button:hover {
            background-color: #ddd;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
</head>
<body>
    <div id="editor" contenteditable="true"></div>

    <script>
        var editor = new MediumEditor('#editor');
    </script>
</body>
</html>

위 코드에서는 CSS 스타일을 사용하여 .medium-editor-toolbar-buttons 및 .medium-editor-toolbar-button 클래스를 설정하고 있습니다. 툴바 컨텐츠의 배경 색상, 텍스트 색상 및 여백, 버튼 호버 효과 등을 변경할 수 있습니다.

MediumEditor를 사용하여 에디터 툴바 컨텐츠를 스타일링하는 방법에 대해 알아보았습니다. 이를 응용하여 사용자 정의 스타일을 적용하거나, 다양한 효과를 추가할 수 있습니다.

참고 자료

MediumEditor 공식 문서