MediumEditor는 많은 기능을 가진 WYSIWYG(What You See Is What You Get) 에디터입니다. 텍스트 편집뿐만 아니라 이미지나 동영상 삽입, 스타일 설정 등 다양한 기능을 제공합니다. 이번에는 MediumEditor를 사용하여 테이블을 생성하는 방법에 대해 알아보겠습니다.

1. MediumEditor 라이브러리 불러오기

먼저, MediumEditor 라이브러리를 HTML 문서에 불러와야 합니다. 다음과 같이 <script> 태그를 사용하여 MediumEditor를 불러올 수 있습니다.

<script src="path/to/medium-editor.min.js"></script>
<link rel="stylesheet" href="path/to/medium-editor.min.css">

2. 테이블 버튼 추가하기

MediumEditor에 테이블 버튼을 추가하기 위해 사용자 정의 버튼을 생성해야 합니다. 다음과 같이 <button> 태그를 사용하여 테이블 버튼을 생성합니다.

<button id="tableButton">테이블</button>

3. MediumEditor 초기화하기

MediumEditor를 초기화할 때 테이블 버튼을 활성화해야 합니다. 다음과 같이 JavaScript 코드를 사용하여 MediumEditor를 초기화합니다.

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

위 코드에서 MediumEditorTable은 테이블을 생성하는 기능을 제공하는 확장(extension)이고, table은 테이블 버튼의 아이디입니다.

4. 결과 확인하기

이제 MediumEditor를 실행하고 테이블 버튼을 클릭하면 테이블이 생성됩니다.

참고: 테이블을 만들기 위해 추가로 HTML 코드를 작성하거나 불러올 필요 없이 MediumEditor에서 바로 테이블을 생성할 수 있습니다.

위와 같이 MediumEditor에서 테이블을 생성하는 방법을 알아보았습니다. MediumEditor를 활용하면 간편하게 테이블을 작성할 수 있고, 다양한 기능을 활용할 수 있습니다.

더 자세한 내용은 MediumEditor GitHub 페이지를 참고하시기 바랍니다.