[javascript] MediumEditor에서 텍스트 길이 카운팅하기

30 Nov 2023

javascript

MediumEditor는 사용자가 쉽게 텍스트를 편집하고 서식을 지정할 수 있는 웹 기반 텍스트 편집기입니다. 텍스트 편집기를 사용할 때, 종종 텍스트의 길이를 제한하거나 텍스트의 길이를 표시하는 기능이 필요할 수 있습니다. 이번 글에서는 MediumEditor에서 텍스트의 길이를 카운팅하는 방법을 알아보겠습니다.

1. MediumEditor와 길이 카운팅 기능 추가하기

먼저, MediumEditor를 웹 페이지에 추가해야 합니다. 다음은 MediumEditor를 사용하기 위해 필요한 스타일시트와 스크립트를 포함하는 HTML 파일의 예입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>MediumEditor 길이 카운팅 예제</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">
</head>
<body>
  <div id="editor" contenteditable="true"></div>

  <script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
  <script>
    var editor = new MediumEditor('#editor');
  </script>
</body>
</html>

위의 예제에서는 #editor라는 ID를 가진 div 요소를 생성하고, contenteditable="true" 속성을 설정하여 편집 가능한 영역을 생성합니다. 그리고 MediumEditor 라이브러리를 스크립트로 추가하고 초기화합니다.

2. 길이 카운팅 기능 추가하기

이제 MediumEditor에 길이 카운팅 기능을 추가해 보겠습니다. 다음과 같이 input 이벤트를 사용하여 입력된 텍스트의 길이를 카운팅하고, 텍스트 밑에 카운팅 결과를 표시하는 함수를 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>MediumEditor 길이 카운팅 예제</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/css/medium-editor.min.css">
  <style>
    .counter {
      font-size: 14px;
      color: #999;
      margin-top: 4px;
    }
  </style>
</head>
<body>
  <div id="editor" contenteditable="true"></div>
  <div class="counter" id="counter"></div>

  <script src="https://cdn.jsdelivr.net/npm/medium-editor@5.23.3/dist/js/medium-editor.min.js"></script>
  <script>
    var editor = new MediumEditor('#editor');

    var counterElement = document.getElementById('counter');
    var editorElement = document.getElementById('editor');

    editorElement.addEventListener('input', function () {
      var text = editorElement.textContent.trim().replace(/\s\s+/g, ' ');
      var count = text.length;
      counterElement.textContent = count + ' 글자';
    });
  </script>
</body>
</html>

위의 예제에서는 #counter라는 ID를 가진 div 요소를 추가하여 결과를 표시합니다. 이벤트 리스너를 사용하여 텍스트 입력이 발생할 때마다 입력된 텍스트의 길이를 계산하고, 결과를 #counter 요소에 업데이트 합니다.

위의 예제를 실행하면 MediumEditor에서 텍스트를 입력할 때마다 아래와 같이 텍스트의 길이가 실시간으로 카운팅됩니다.

카운팅 결과 예시

3. 참고 자료

위의 예제에서 사용된 MediumEditor에 관련된 자세한 사항은 공식 사이트와 GitHub 저장소에서 확인할 수 있습니다.