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

30 Nov 2023

javascript

MediumEditor는 웹 페이지에서 사용할 수 있는 WYSIWYG(What You See Is What You Get) 에디터 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 텍스트 편집을 간편하게 할 수 있습니다.

이번에는 MediumEditor의 툴바에 테이블 생성 기능을 추가하는 방법에 대해 알아보겠습니다.

1. MediumEditor 설치하기

먼저 MediumEditor를 설치합니다. 아래의 명령을 사용하여 npm을 통해 MediumEditor를 설치합니다.

npm install medium-editor

2. 테이블 생성 버튼 추가하기

MediumEditor에 테이블 생성 버튼을 추가하기 위해서는 MediumEditor의 툴바 커스터마이징 기능을 활용합니다. 아래의 코드를 참고하여 테이블 버튼을 툴바에 추가하는 함수를 작성합니다.

function addTableButton(toolbar) {
  var tableButton = document.createElement('button');
  tableButton.classList.add('medium-editor-action');
  tableButton.innerText = '테이블';
  tableButton.addEventListener('click', function() {
    // 테이블 생성 로직 작성
  });

  toolbar.appendChild(tableButton);
}

3. 테이블 생성 로직 작성하기

테이블 버튼을 클릭했을 때 호출되는 함수에서는 실제로 테이블을 생성하는 로직을 작성해야 합니다. 아래의 예시 코드를 참고하여 테이블을 생성하는 함수를 작성합니다.

function createTable() {
  var numRows = prompt("테이블의 행 수를 입력하세요:");
  var numCols = prompt("테이블의 열 수를 입력하세요:");

  if (numRows && numCols) {
    var table = document.createElement('table');

    for (var i = 0; i < numRows; i++) {
      var row = document.createElement('tr');

      for (var j = 0; j < numCols; j++) {
        var cell = document.createElement('td');
        cell.textContent = '텍스트';
        row.appendChild(cell);
      }

      table.appendChild(row);
    }

    // 생성한 테이블을 에디터에 삽입하는 로직 작성
  }
}

위의 코드에서 createTable 함수는 사용자로부터 행과 열의 개수를 입력 받은 후, 해당 개수만큼의 테이블을 생성합니다. 생성한 테이블을 에디터에 삽입하는 로직은 개발자의 요구사항에 따라 직접 작성해야 합니다.

4. 테이블 버튼 추가하기

테이블 생성 함수가 작성되었다면, 이제 addTableButton 함수를 호출하여 테이블 버튼을 툴바에 추가합니다. MediumEditor의 toolbar 옵션을 사용하여 툴바를 설정하는 코드에 아래와 같이 addTableButton(toolbar)을 추가해주세요.

var editor = new MediumEditor('.editable', {
  toolbar: {
    buttons: ['bold', 'italic', 'underline', 'table']
  }
});

addTableButton(editor.toolbar);

위의 코드에서 addTableButton(editor.toolbar)은 addTableButton 함수를 호출하여 테이블 버튼을 툴바에 추가하는 역할을 합니다.

결론

위의 단계를 따라가면 MediumEditor의 툴바에 테이블 생성 기능을 추가할 수 있습니다. 이러한 커스터마이징 기능을 활용하여 MediumEditor를 더욱 다양한 기능으로 확장할 수 있습니다.