[javascript] MediumEditor에서 에디터 활성화하기

30 Nov 2023

javascript

MediumEditor는 사용자가 웹 페이지에서 텍스트를 편집할 수 있도록 도와주는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 편집가능한 영역으로 변환할 수 있는 텍스트 입력 상자를 만들 수 있습니다.

설치하기

먼저, MediumEditor를 사용하기 위해 npm을 통해 라이브러리를 설치해야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하세요:

npm install medium-editor

에디터 활성화하기

HTML 파일에 <textarea> 태그를 추가하고, 이 태그에 MediumEditor를 적용하는 JavaScript 코드를 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/medium-editor/dist/css/medium-editor.min.css">
</head>
<body>
  <textarea id="my-editor"></textarea>

  <script src="node_modules/medium-editor/dist/js/medium-editor.min.js"></script>
  <script>
    var editor = new MediumEditor('#my-editor');
  </script>
</body>
</html>

위의 코드는 MediumEditor를 사용하여 my-editor라는 ID를 가진 <textarea> 태그를 편집 가능한 영역으로 변환합니다. <script> 태그를 이용해 MediumEditor 라이브러리를 로드한 후, new MediumEditor('#my-editor') 코드를 이용해 해당 태그에 에디터를 적용합니다.

이제 웹 페이지를 열면 my-editor 영역에 텍스트를 편집할 수 있는 에디터가 활성화됩니다.

에디터 옵션 설정하기

MediumEditor는 다양한 옵션을 설정하여 에디터 동작을 커스터마이즈할 수 있습니다. 예를 들어, 에디터의 폰트 크기나 색상, 툴바 버튼 등을 변경할 수 있습니다.

var editor = new MediumEditor('#my-editor', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'h2', 'h3']
  },
  placeholder: '여기에 내용을 입력하세요...'
});

위의 코드에서는 buttons 배열을 통해 에디터의 툴바에 표시되는 버튼들을 지정하고, placeholder 속성을 통해 에디터 시작 시 보여질 안내 텍스트를 지정하였습니다. 이처럼 옵션을 설정하여 에디터를 원하는대로 커스터마이즈할 수 있습니다.

MediumEditor에 대한 더 자세한 정보는 공식 문서를 참조하세요.

참조:

MediumEditor 공식 문서