MediumEditor는 사용자가 웹페이지에서 텍스트를 편집할 수 있는 사용하기 쉬운 WYSIWYG 에디터입니다. 이 툴은 많은 기능을 제공하는데, 그 중 하나는 사용자가 텍스트 편집 시 툴바를 보여주거나 숨길 수 있는 것입니다. 이 글에서는 MediumEditor에서 툴바를 숨기고 보여주는 방법을 알아보겠습니다.
1. MediumEditor 설치하기
MediumEditor를 사용하려면 먼저 필요한 파일을 다운로드해야 합니다. 다음과 같이 명령어를 사용하여 MediumEditor를 설치합니다.
npm install medium-editor
2. HTML 문서에 MediumEditor 추가하기
MediumEditor를 사용할 HTML 문서에 다음과 같이 스타일 및 스크립트 파일을 추가합니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.2/css/medium-editor.min.css">
</head>
<body>
<div id="editable" contenteditable="true"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.2/js/medium-editor.min.js"></script>
<script>
var editor = new MediumEditor('#editable');
</script>
</body>
</html>
3. 툴바 숨기기
툴바를 숨기기 위해서는 .medium-editor-toolbar 클래스에 display: none 스타일을 적용하면 됩니다.
.medium-editor-toolbar {
display: none;
}
위의 코드를 CSS 파일에 추가하거나 style 태그 안에 직접 추가합니다.
4. 툴바 보여주기
툴바를 보여주기 위해서는 .medium-editor-toolbar 클래스에 display: block 스타일을 적용하면 됩니다.
editor.showToolbar();
MediumEditor의 showToolbar() 메서드를 호출하여 툴바를 보여줄 수 있습니다. 이 메서드는 현재 편집 중인 텍스트 영역에 대해 툴바를 표시합니다.
5. 결과 확인하기
위의 코드를 적용한 후에 HTML 문서를 열어보면 툴바가 초기에는 보이지 않지만, editor.showToolbar() 메서드를 호출하면 툴바가 나타나는 것을 확인할 수 있습니다.
MediumEditor에서 툴바를 숨기고 보여주는 방법에 대해 알아보았습니다. 이러한 기능을 활용하여 사용자의 요구에 맞춰 편집 환경을 조정할 수 있습니다.