[javascript] MediumEditor에서 에디터 툴바 버튼에 코드 블록 생성 기능 추가하기

30 Nov 2023

javascript

MediumEditor는 사용자가 텍스트를 편집할 수 있는 JavaScript 기반의 WYSIWYG(What You See Is What You Get) 에디터입니다. 이 글에서는 MediumEditor의 툴바에 코드 블록을 생성할 수 있는 기능을 추가하는 방법을 알아보겠습니다.

1. MediumEditor 라이브러리 추가하기

우선, MediumEditor를 사용하기 위해 HTML 파일에 MediumEditor 라이브러리를 추가합니다. 다음 코드를 <head> 태그 내에 추가합니다:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/css/medium-editor.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/medium-editor/5.23.3/js/medium-editor.min.js"></script>

2. 툴바에 코드 블록 버튼 추가하기

MediumEditor의 툴바에 코드 블록 버튼을 추가하기 위해 <head> 태그에 다음 코드를 추가합니다:

<style>
  .medium-editor-toolbar .medium-editor-button-code {
    background: url(path/to/code-icon.png) no-repeat;
    /* 코드 블록 아이콘 이미지 경로를 지정합니다 */
  }
</style>

위 코드에서 코드 블록 버튼의 아이콘 이미지를 path/to/code-icon.png로 지정합니다. 이 이미지는 원하는 아이콘 이미지로 변경할 수 있습니다.

3. 코드 블록 생성 기능 추가하기

이제 실제 코드 블록 생성 기능을 작성해보겠습니다. HTML 파일에 다음 JavaScript 코드를 추가합니다:

<script>
  var editor = new MediumEditor('.editable', {
    // MediumEditor 초기화 설정
  });

  // 코드 블록 버튼 클릭 시 동작할 함수
  function insertCodeBlock() {
    var currentSelection = editor.getSelectedParentElement();
    var codeBlock = '<pre><code>// 여기에 코드를 작성하세요</code></pre>';
    // 원하는 코드 블록 형태로 수정 가능

    if (currentSelection) {
      // 현재 선택된 텍스트가 있는 경우
      currentSelection.insertAdjacentHTML('afterend', codeBlock);
    } else {
      // 현재 선택된 텍스트가 없는 경우
      editor.insertHtml(codeBlock);
    }
  }

  // 코드 블록 버튼 클릭 시 insertCodeBlock 함수 호출
  document.querySelector('.medium-editor-toolbar').addEventListener('click', function (event) {
    if (event.target.classList.contains('medium-editor-button-code')) {
      insertCodeBlock();
    }
  });
</script>

위 코드에서는 MediumEditor를 .editable 클래스를 가진 요소에 적용하고, 툴바 클릭 이벤트를 모니터링하여 코드 블록 버튼이 클릭되었을 때 insertCodeBlock() 함수를 호출하는 기능을 구현합니다. insertCodeBlock() 함수에서는 현재 선택된 텍스트가 있는지 확인하고, 선택된 텍스트가 있으면 해당 위치에 코드 블록을 삽입하고, 선택된 텍스트가 없으면 에디터의 현재 위치에 코드 블록을 삽입합니다.

4. 에디터에 MediumEditor 적용하기

마지막으로, 실제 에디터로 사용할 요소에 .editable 클래스를 추가하여 MediumEditor를 적용합니다. 예를 들어, 다음과 같이 <textarea> 요소를 사용하여 에디터를 생성할 수 있습니다:

<textarea class="editable"></textarea>

이렇게 설정하면, .editable 클래스를 가진 <textarea> 요소가 MediumEditor의 에디터로 변환됩니다.

위의 단계를 따라하면 MediumEditor의 툴바에 코드 블록 생성 버튼을 추가할 수 있습니다. 에디터를 실행하고 코드 블록 버튼을 클릭하면, 현재 위치에 코드 블록이 삽입되는 것을 확인할 수 있습니다.

참고 문서: