MediumEditor는 사용자가 쉽게 텍스트를 편집하고 포맷할 수 있는 WYSIWYG 에디터입니다. 이 기능을 사용하여 에디터 툴바의 버튼에 텍스트 입력 기능을 추가하는 방법을 알아보겠습니다.

에디터 툴바 버튼에 텍스트 입력 기능 추가하기

1. MediumEditor를 프로젝트에 추가합니다. npm 패키지로 설치하거나 CDN을 통해 가져올 수 있습니다.

npm install medium-editor

1. HTML에 에디터 컨테이너를 추가하고 툴바 버튼을 만듭니다.

<div id="editor">
  <button class="medium-editor-button">텍스트 입력</button>
</div>

1. JavaScript 코드에서 MediumEditor를 초기화하고 텍스트 입력 버튼에 이벤트를 추가합니다.

// MediumEditor 초기화
var editor = new MediumEditor('#editor');

// 텍스트 입력 버튼 클릭 이벤트 처리
var textInputButton = document.querySelector('.medium-editor-button');
textInputButton.addEventListener('click', function() {
  // 텍스트 입력 처리 로직 추가
  // ...
});

1. 텍스트 입력 버튼 클릭 이벤트 핸들러에서 사용자로부터 입력을 받고, 에디터에 텍스트를 추가합니다.

textInputButton.addEventListener('click', function() {
  var text = prompt('텍스트를 입력하세요:');
  if (text) {
    editor.pasteHTML(text);
  }
});

1. 이제 웹 페이지를 열어 에디터를 사용해보세요. 텍스트 입력 버튼을 클릭하면 사용자가 입력한 텍스트가 에디터에 추가됩니다.

결론

MediumEditor를 사용하여 에디터 툴바의 버튼에 텍스트 입력 기능을 추가하는 방법을 알아보았습니다. 사용자가 입력한 텍스트를 편리하게 에디터에 추가하고 포맷할 수 있게 되었습니다. 이를 통해 애플리케이션의 사용성을 향상시킬 수 있습니다.

참고 자료:

• MediumEditor 공식 문서